@lieselthuriot/widget-renderer 0.0.0-stage → 0.2.0

package/types/lieselthuriot-widget-renderer.d.ts

@@ -0,0 +1,397 @@
+import * as i0 from "@angular/core";
+import { OnDestroy } from "@angular/core";
+export type GridUnit = 'pixel' | 'auto' | 'star';
+export type WidgetElementType = 'text' | 'image' | 'button' | 'divider' | 'pie' | 'donut' | 'funnel' | 'gauge' | 'bar' | 'line' | 'progress';
+export type ButtonMethod = 'get' | 'post';
+export type WidgetSize = 'mini' | 'compact' | 'tall' | 'square' | 'wide' | 'mega' | 'banner' | 'hero';
+export type ElementAnchor = 'top left' | 'top center' | 'top right' | 'center left' | 'center' | 'center right' | 'bottom left' | 'bottom center' | 'bottom right';
+export type GridTrack = {
+  size: number;
+  unit: 'pixel' | 'star';
+} | {
+  size?: never;
+  unit: 'auto';
+};
+export interface BackgroundConfig {
+  image?: string;
+  sensitive: boolean;
+  repeat: boolean;
+  color?: string;
+  size: 'cover' | 'contain' | 'auto';
+  anchor: ElementAnchor;
+  overlayColor?: string;
+}
+export interface RefreshConfig {
+  enabled: boolean;
+  label: string;
+}
+export interface TextStyle {
+  color: string;
+  font: TextFontStyle;
+  align: 'left' | 'center' | 'right';
+  wrap: boolean;
+  background?: string;
+  radius?: number;
+  padding?: TextPadding | null;
+}
+export interface TextPadding {
+  vertical: number;
+  horizontal: number;
+}
+export interface ElementGrid {
+  row: number;
+  column: number;
+  rowSpan: number;
+  columnSpan: number;
+  anchor?: ElementAnchor;
+}
+export interface TextFontStyle {
+  size: number;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikethrough?: boolean;
+}
+export interface ChartFontStyle {
+  size: number;
+}
+export interface WidgetElementBase {
+  type: WidgetElementType;
+  grid: ElementGrid;
+  sensitive: boolean;
+}
+export interface TextElement extends WidgetElementBase {
+  type: 'text';
+  text: string;
+  style: TextStyle;
+}
+export interface ImageElement extends WidgetElementBase {
+  type: 'image';
+  source: string;
+  alt: string;
+  fit: 'cover' | 'contain' | 'fill';
+  overlayColor?: string;
+  radius: number;
+}
+export interface ButtonElement extends WidgetElementBase {
+  type: 'button';
+  label: string;
+  method: ButtonMethod;
+  url: string;
+  body?: string | null;
+  requestRefresh: boolean;
+  showOnlyOnHover: boolean;
+  style: 'solid' | 'outline';
+}
+export interface DividerElement extends WidgetElementBase {
+  type: 'divider';
+  orientation: 'horizontal' | 'vertical';
+  style: {
+    color: string;
+  };
+}
+export interface ChartDataPoint {
+  label: string;
+  value: number;
+  color?: string | null;
+}
+export interface ChartElementBase extends WidgetElementBase {
+  type: 'pie' | 'donut' | 'funnel' | 'gauge' | 'bar' | 'line' | 'progress';
+  title?: string;
+  showLegend: boolean;
+}
+export interface DataVisualStyle {
+  color: {
+    legend: string;
+  };
+  font: ChartFontStyle;
+}
+export interface ChartStyle extends DataVisualStyle {
+  color: DataVisualStyle['color'] & {
+    title: string;
+  };
+}
+export interface AxisChartStyle extends ChartStyle {
+  color: ChartStyle['color'] & {
+    line?: string;
+  };
+  axis: {
+    label: string;
+    line: string;
+    grid: string;
+  };
+}
+export interface FillTrackStyle extends DataVisualStyle {
+  color: DataVisualStyle['color'] & {
+    fill: string;
+    track: string;
+  };
+}
+export interface ProgressSegment {
+  kind: 'segment';
+  label: string;
+  value: number;
+  color: string;
+  active: boolean;
+}
+export interface ProgressGap {
+  kind: 'gap';
+  value: number;
+}
+export type ProgressItem = ProgressSegment | ProgressGap;
+export interface ProgressData {
+  min: number;
+  max: number;
+  items: ProgressItem[];
+}
+export interface ProgressRadius {
+  segment: number;
+  track: number;
+}
+export interface GaugeData {
+  value: number;
+  min: number;
+  max: number;
+}
+export interface ValueChartStyle extends FillTrackStyle {
+  color: FillTrackStyle['color'] & {
+    title: string;
+  };
+}
+export interface ProgressStyle extends DataVisualStyle {
+  color: DataVisualStyle['color'] & {
+    title: string;
+    track: string;
+  };
+  radius?: ProgressRadius | null;
+}
+export interface PieElement extends ChartElementBase {
+  type: 'pie' | 'donut';
+  data: ChartDataPoint[];
+  style: ChartStyle;
+}
+export interface FunnelElement extends ChartElementBase {
+  type: 'funnel';
+  data: ChartDataPoint[];
+  style: ChartStyle;
+}
+export interface GaugeElement extends ChartElementBase {
+  type: 'gauge';
+  data: GaugeData;
+  style: ValueChartStyle;
+}
+export interface SeriesElement extends ChartElementBase {
+  type: 'bar' | 'line';
+  data: ChartDataPoint[];
+  style: AxisChartStyle;
+}
+export interface ProgressElement extends ChartElementBase {
+  type: 'progress';
+  data: ProgressData;
+  style: ProgressStyle;
+}
+export type ChartElement = PieElement | FunnelElement | GaugeElement | SeriesElement;
+export type WidgetElement = TextElement | ImageElement | ButtonElement | DividerElement | ChartElement | ProgressElement;
+export type ButtonElementContract = Omit<ButtonElement, 'requestRefresh' | 'showOnlyOnHover'> & {
+  requestRefresh?: boolean;
+  showOnlyOnHover?: boolean;
+};
+export type WidgetElementContract = TextElement | ImageElement | ButtonElementContract | Omit<DividerElement, 'sensitive'> | ChartElement | ProgressElement;
+export interface Widget {
+  version: 2;
+  id: string;
+  size: WidgetSize;
+  rows: GridTrack[];
+  columns: GridTrack[];
+  background: BackgroundConfig;
+  refresh: RefreshConfig;
+  elements: WidgetElement[];
+}
+export type WidgetContract = Omit<Widget, 'refresh' | 'elements'> & {
+  refresh?: RefreshConfig | null;
+  elements: WidgetElementContract[];
+};
+export type WidgetInput = WidgetContract;
+export declare function normalizeWidgetInput(widget: WidgetInput): WidgetInput;
+export type WidgetValidationRuleMode = 'block' | 'report';
+export interface WidgetValidationIssue {
+  path: string;
+  message: string;
+  severity?: WidgetValidationRuleMode;
+}
+export interface WidgetValidationRule {
+  validate(widget: WidgetInput): readonly WidgetValidationIssue[];
+  mode?: WidgetValidationRuleMode;
+}
+export type WidgetValidationRuleInput = WidgetValidationRule | ((widget: WidgetInput) => readonly WidgetValidationIssue[]);
+export interface WidgetParseOptions {
+  rules?: readonly WidgetValidationRuleInput[];
+}
+export interface WidgetParseSuccess {
+  success: true;
+  data: WidgetInput;
+  issues: WidgetValidationIssue[];
+}
+export interface WidgetParseFailure {
+  success: false;
+  issues: WidgetValidationIssue[];
+}
+export type WidgetParseResult = WidgetParseSuccess | WidgetParseFailure;
+export declare class WidgetValidationError extends Error {
+  readonly issues: WidgetValidationIssue[];
+  constructor(issues: WidgetValidationIssue[]);
+}
+export declare function safeParseWidgetInput(value: unknown, options?: WidgetParseOptions): WidgetParseResult;
+export declare function parseWidgetInput(value: unknown, options?: WidgetParseOptions): WidgetInput;
+export declare function isWidgetContract(value: unknown): value is WidgetContract;
+export declare function isWidget(value: unknown): value is Widget;
+/**
+ * Version prefix of the fingerprint algorithm. Change it whenever the set of
+ * fingerprinted properties or the canonical encoding changes.
+ */
+export declare const WIDGET_FINGERPRINT_VERSION = 1;
+/**
+ * Computes a stable fingerprint of a widget's look, for example to gate
+ * user-built widgets behind an approval step. Content that may vary per
+ * visitor (text, labels, alt text, titles, chart data, button URLs and bodies,
+ * the widget id, and the refresh label) is ignored; only whether text, labels,
+ * alt text, and titles are empty is included. Returns `null` for invalid input.
+ */
+export declare function computeWidgetFingerprint(input: unknown): string | null;
+export declare const WIDGET_HEIGHT = 245;
+export declare const WIDGET_PADDING = 18;
+export declare const WIDGET_GAP = 8;
+export declare const WIDGET_CELL_WIDTH = 133;
+export declare const WIDGET_CELL_HEIGHT = 123;
+export declare function widgetFootprint(size: WidgetSize | unknown): {
+  columns: number;
+  rows: number;
+};
+export declare function gridSpanSize(span: number, cellSize: number): number;
+export declare function widgetWidth(size: WidgetSize | unknown): number;
+export declare function widgetHeight(size: WidgetSize | unknown): number;
+export declare function gridTemplate(tracks: GridTrack[]): string;
+export declare function elementGridStyle(element: WidgetElement): Record<string, string>;
+export interface WidgetRendererChartLocale {
+  progressAriaLabel: (title: string | undefined, value: string, range: string) => string;
+  gaugeAriaLabel: (title: string | undefined, value: string, max: string) => string;
+  chartAriaLabel: (title: string | undefined, chartType: string, pointCount: number) => string;
+  progressSummary: (title: string | undefined, value: string, min: string, max: string, breakdown: string) => string;
+  gaugeSummary: (title: string | undefined, value: string, max: string, percentage: string) => string;
+  dataSummary: (title: string | undefined, points: string) => string;
+  noDataSummary: (title: string | undefined) => string;
+  noSegmentsSummary: string;
+  morePoints: (count: number) => string;
+  progressSegmentLabel: (label: string, value: string) => string;
+  dataPointLabel: (label: string, value: string) => string;
+  gaugeValueLabel: string;
+  progressBreakdown: (label: string, start: string, end: string) => string;
+}
+export interface WidgetRendererAriaLocale {
+  toolbarActions: string;
+  loading: string;
+  showSensitiveData: string;
+  hideSensitiveData: string;
+  imageUnavailable: string;
+  chart: WidgetRendererChartLocale;
+}
+export interface WidgetRendererLocale {
+  aria: WidgetRendererAriaLocale;
+}
+export interface WidgetRendererLocaleOverrides {
+  aria?: Partial<Omit<WidgetRendererAriaLocale, 'chart'>> & {
+    chart?: Partial<WidgetRendererChartLocale>;
+  };
+}
+export declare const defaultWidgetRendererLocale: WidgetRendererLocale;
+export declare const germanWidgetRendererLocale: WidgetRendererLocale;
+export declare const frenchWidgetRendererLocale: WidgetRendererLocale;
+export declare const dutchWidgetRendererLocale: WidgetRendererLocale;
+interface ChartTooltipState {
+  x: number;
+  y: number;
+  label: string;
+  value: number;
+  color?: string;
+}
+declare class WidgetTooltip {
+  readonly state: import("@angular/core").WritableSignal<ChartTooltipState | null>;
+  private readonly overlay;
+  private readonly currentOwner;
+  readonly owner: import("@angular/core").Signal<object | null>;
+  setOverlay(overlay: HTMLElement): void;
+  overlayElement(): HTMLElement | null;
+  show(owner: object, state: ChartTooltipState): void;
+  hide(owner: object): void;
+  clear(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<WidgetTooltip, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+export type WidgetLoading = boolean | Widget['size'];
+export declare class WidgetRenderer implements OnDestroy {
+  readonly widget: import("@angular/core").InputSignal<import("@lieselthuriot/widget-renderer").WidgetContract | null>;
+  readonly loading: import("@angular/core").InputSignal<WidgetLoading>;
+  readonly darkMode: import("@angular/core").InputSignal<boolean>;
+  readonly locale: import("@angular/core").InputSignal<WidgetRendererLocaleOverrides>;
+  readonly validationRules: import("@angular/core").InputSignal<readonly WidgetValidationRuleInput[]>;
+  readonly refreshRequested: import("@angular/core").OutputEmitterRef<void>;
+  readonly actionRequested: import("@angular/core").OutputEmitterRef<{
+    element: ButtonElement;
+    event: Event;
+  }>;
+  readonly sensitiveVisible: import("@angular/core").WritableSignal<boolean>;
+  protected readonly tooltip: WidgetTooltip;
+  private readonly tooltipLayer;
+  private readonly parsedWidget;
+  protected readonly isLoading: import("@angular/core").Signal<boolean>;
+  protected readonly resolvedLocale: import("@angular/core").Signal<WidgetRendererLocale>;
+  protected readonly loadingSize: import("@angular/core").Signal<import("@lieselthuriot/widget-renderer").WidgetSize>;
+  readonly validationIssues: import("@angular/core").Signal<import("@lieselthuriot/widget-renderer").WidgetValidationIssue[]>;
+  protected readonly blockingIssues: import("@angular/core").Signal<import("@lieselthuriot/widget-renderer").WidgetValidationIssue[]>;
+  protected readonly renderWidget: import("@angular/core").Signal<Widget>;
+  readonly hasSensitiveElements: import("@angular/core").Signal<boolean>;
+  readonly backgroundSensitive: import("@angular/core").Signal<boolean>;
+  readonly gridRows: import("@angular/core").Signal<string>;
+  readonly gridColumns: import("@angular/core").Signal<string>;
+  readonly widgetWidth: import("@angular/core").Signal<number>;
+  readonly widgetHeight: import("@angular/core").Signal<number>;
+  readonly backgroundImage: import("@angular/core").Signal<string>;
+  constructor();
+  ngOnDestroy(): void;
+  protected toggleSensitive(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<WidgetRenderer, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<WidgetRenderer, "widget-renderer", never, {
+    "widget": {
+      "alias": "widget";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "darkMode": {
+      "alias": "darkMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "validationRules": {
+      "alias": "validationRules";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "refreshRequested": "refreshRequested";
+    "actionRequested": "actionRequested";
+  }, never, never, true, never>;
+}
+export declare function chartAriaLabel(element: ChartElement | ProgressElement, locale?: WidgetRendererChartLocale): string;
+export declare function chartAccessibilitySummary(element: ChartElement | ProgressElement, locale?: WidgetRendererChartLocale): string;
+export {};
+//# sourceMappingURL=lieselthuriot-widget-renderer.d.ts.map

package/types/lieselthuriot-widget-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lieselthuriot-widget-renderer.d.ts","names":[],"sources":["../../../projects/widget-renderer/src/lib/widget.model.ts","../../../projects/widget-renderer/src/lib/widget-hydration.ts","../../../projects/widget-renderer/src/lib/widget-validation.ts","../../../projects/widget-renderer/src/lib/widget-fingerprint.ts","../../../projects/widget-renderer/src/lib/widget-layout.ts","../../../projects/widget-renderer/src/lib/widget-locale.ts","../../../projects/widget-renderer/src/lib/widget-tooltip.ts","../../../projects/widget-renderer/src/lib/widget-renderer.ts","../../../projects/widget-renderer/src/lib/chart-accessibility.ts"],"mappings":"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"}