@area8975/ui 0.1.1-dev.18 → 0.1.1-dev.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.1.1-dev.18",
+  "version": "0.1.1-dev.21",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",

package/types/area8975-ui.d.ts

@@ -76,6 +76,7 @@ export type ChartValueFormatter = (value: number) => string;
 /** Inputs every chart with categories along one axis and values up the other shares. */
 declare abstract class UiAxisChartBase implements ChartLegendSource {
   protected readonly uiFormat: import("@area8975/ui").UiFormat;
+  private readonly privacy;
   protected readonly dark: import("@angular/core").WritableSignal<boolean>;
   protected readonly ink: import("@angular/core").Signal<import("@area8975/ui").ChartInk>;
   readonly series: import("@angular/core").InputSignal<ChartSeries[]>;
@@ -85,6 +86,8 @@ declare abstract class UiAxisChartBase implements ChartLegendSource {
   readonly height: import("@angular/core").InputSignal<ChartHeight>;
   /** Used on the value axis, the tooltip and the table, e.g. to show money. */
   readonly valueFormatter: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /** Masks the values in privacy mode. Defaults to whether `valueFormatter` came from `injectMoneyFormatter`. */
+  readonly sensitive: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
   /** Heading for the category column in the data table. */
   readonly categoryLabel: import("@angular/core").InputSignal<string>;
   readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -107,6 +110,11 @@ declare abstract class UiAxisChartBase implements ChartLegendSource {
   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;
+  private readonly money;
+  protected readonly privacyMode: import("@angular/core").Signal<"visible" | "discreet" | "hidden">;
+  protected readonly masked: import("@angular/core").Signal<boolean>;
+  protected readonly concealed: import("@angular/core").Signal<boolean>;
+  protected readonly displayFormatter: import("@angular/core").Signal<ChartValueFormatter>;
   protected readonly apexHeight: import("@angular/core").Signal<number | "100%">;
   protected readonly isEmpty: import("@angular/core").Signal<boolean>;
   protected readonly isMuted: import("@angular/core").Signal<boolean[]>;
@@ -145,6 +153,11 @@ declare abstract class UiAxisChartBase implements ChartLegendSource {
       "required": false;
       "isSignal": true;
     };
+    "sensitive": {
+      "alias": "sensitive";
+      "required": false;
+      "isSignal": true;
+    };
     "categoryLabel": {
       "alias": "categoryLabel";
       "required": false;
@@ -280,6 +293,7 @@ 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 masked: 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. */
   readonly emphasis: import("@angular/core").ModelSignal<string | null>;
@@ -357,6 +371,11 @@ export declare class UiChartFrameComponent {
       "required": false;
       "isSignal": true;
     };
+    "masked": {
+      "alias": "masked";
+      "required": false;
+      "isSignal": true;
+    };
     "showLegend": {
       "alias": "showLegend";
       "required": false;
@@ -383,6 +402,9 @@ export declare class UiChartTableComponent {
   readonly valueFormatter: import("@angular/core").InputSignal<ChartValueFormatter>;
   readonly categoryLabel: import("@angular/core").InputSignal<string>;
   readonly visible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Values are masks, screen readers hear "amount hidden" instead. */
+  readonly masked: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  protected isValue(value: number | null | undefined): value is number;
   protected format(value: number | null | undefined): string;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiChartTableComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiChartTableComponent, "ui-chart-table", never, {
@@ -416,6 +438,11 @@ export declare class UiChartTableComponent {
       "required": false;
       "isSignal": true;
     };
+    "masked": {
+      "alias": "masked";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -577,8 +604,21 @@ export interface UiFormat {
 export declare const UI_FORMAT_DEFAULTS: UiFormat;
 export declare const UI_FORMAT: InjectionToken<UiFormat>;
 export declare function provideUiFormat(format: Partial<UiFormat>): Provider;
-/** Needs an injection context, e.g. a component field. */
+export interface MoneyFormatterParts {
+  format: (value: number) => string;
+  mask: string;
+}
+/** The unmasked formatter and mask behind a formatter from `injectMoneyFormatter`, null for any other function. */
+export declare function moneyFormatterParts(formatter: (value: number) => string): MoneyFormatterParts | null;
+/** Needs an injection context. Reads `UI_PRIVACY` on every call, so a template or computed calling it follows the mode. */
 export declare function injectMoneyFormatter(options?: Intl.NumberFormatOptions): (value: number) => string;
+export declare const UiPrivacies: readonly ["visible", "discreet", "hidden"];
+/** Discreet hides amounts but keeps their shape, hidden hides everything about them. */
+export type UiPrivacy = typeof UiPrivacies[number];
+export declare const UI_PRIVACY: InjectionToken<Signal<"visible" | "discreet" | "hidden">>;
+/** The factory runs in an injection context, so it can return a signal from an app service. */
+export declare function provideUiPrivacy(privacy: () => Signal<UiPrivacy>): Provider;
+export declare function maskMoney(currency: string, locale: string): string;
 /** 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} */
@@ -1841,7 +1881,7 @@ export declare class UiCardHeaderComponent {
   readonly heading: import("@angular/core").InputSignal<string>;
   readonly subtitle: import("@angular/core").InputSignal<string>;
   /** Pick the level that fits the page's outline, it doesn't change the look. */
-  readonly headingLevel: import("@angular/core").InputSignal<2 | 3 | 4>;
+  readonly headingLevel: import("@angular/core").InputSignal<3 | 2 | 4>;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiCardHeaderComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<UiCardHeaderComponent, "ui-card-header", never, {
     "heading": {
@@ -2042,6 +2082,7 @@ export declare class UiModalComponent {
  */
 export declare class UiMoneyComponent {
   private readonly defaults;
+  private readonly privacy;
   readonly value: import("@angular/core").InputSignal<number | null>;
   /** Defaults to the currency from `provideUiFormat`. */
   readonly currency: import("@angular/core").InputSignal<string>;
@@ -2057,6 +2098,8 @@ export declare class UiMoneyComponent {
   /** Shown when there's no value. */
   readonly placeholder: import("@angular/core").InputSignal<string>;
   private readonly amount;
+  protected readonly masked: import("@angular/core").Signal<boolean>;
+  protected readonly mask: import("@angular/core").Signal<string>;
   protected readonly formatted: import("@angular/core").Signal<string>;
   protected readonly title: import("@angular/core").Signal<string | null>;
   readonly generatedClasses: import("@angular/core").Signal<string>;
@@ -2409,7 +2452,7 @@ export interface TableColumn<Row> {
   accessor: (row: Row) => unknown;
   /** how the cell value is formatted for display, defaults to plain text */
   displayType?: TableColumnDisplayType;
-  /** ISO currency code, used when displayType is 'currency' */
+  /** ISO currency code, used when displayType is 'currency'. Defaults to the currency from `provideUiFormat`. */
   currency?: string;
   sortable?: boolean;
   filterable?: boolean;
@@ -2530,6 +2573,7 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
   private readonly destroyRef;
   private readonly cdr;
   private readonly registry;
+  protected readonly uiFormat: import("@area8975/ui").UiFormat;
   private loadedQuery;
   private loadedFilters;
   private resizeState;
@@ -2541,6 +2585,7 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
   reload(): void;
   protected cellValue(column: TableColumn<Row>, row: Row): unknown;
   protected cellIconValue(column: TableColumn<Row>, row: Row): string;
+  protected moneyCellValue(column: TableColumn<Row>, row: Row): number | null;
   protected formattedCellValue(column: TableColumn<Row>, row: Row): string;
   protected onQueryChange(value: string): void;
   protected filterValue(columnId: string): string;
@@ -3616,8 +3661,6 @@ export declare class UiUserMenuComponent {
   readonly detail: import("@angular/core").InputSignal<string>;
   readonly src: import("@angular/core").InputSignal<string | null>;
   readonly items: import("@angular/core").InputSignal<DropdownMenuItem[]>;
-  /** Shows the System, Light and Dark switch, which needs `provideUiTheme()`. */
-  readonly themeSwitch: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   protected readonly menuItems: import("@angular/core").Signal<DropdownMenuItem[]>;
   protected isDivider(item: DropdownMenuItem): boolean;
   protected group(item: DropdownMenuItem): DropdownMenuCategory | null;
@@ -3645,12 +3688,7 @@ export declare class UiUserMenuComponent {
       "required": false;
       "isSignal": true;
     };
-    "themeSwitch": {
-      "alias": "themeSwitch";
-      "required": false;
-      "isSignal": true;
-    };
-  }, {}, never, never, true, never>;
+  }, {}, never, ["*"], true, never>;
 }
 /** What the user picked, `system` follows the OS setting. */
 export type UiThemePreference = 'system' | 'light' | 'dark';