@hyalo/angular 0.0.0-stage → 0.3.1

package/types/hyalo-angular-skeleton.d.ts

@@ -0,0 +1,34 @@
+import * as i0 from "@angular/core";
+export type HySkeletonAnimation = 'shimmer' | 'pulse' | 'none';
+/** Decorative placeholder. Put aria-busy on the region being loaded. */
+export declare class HySkeleton {
+  private readonly motion;
+  protected readonly animate: import("@angular/core").Signal<boolean>;
+  readonly animation: import("@angular/core").InputSignal<HySkeletonAnimation>;
+  readonly shape: import("@angular/core").InputSignal<"text" | "circle" | "rect">;
+  readonly width: import("@angular/core").InputSignal<string>;
+  readonly height: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HySkeleton, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HySkeleton, "hy-skeleton", never, {
+    "animation": {
+      "alias": "animation";
+      "required": false;
+      "isSignal": true;
+    };
+    "shape": {
+      "alias": "shape";
+      "required": false;
+      "isSignal": true;
+    };
+    "width": {
+      "alias": "width";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/hyalo-angular-sparkline.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+export declare class HySparkline {
+  readonly data: import("@angular/core").InputSignal<readonly number[]>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly points: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HySparkline, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HySparkline, "hy-sparkline", never, {
+    "data": {
+      "alias": "data";
+      "required": true;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/hyalo-angular-split-text.d.ts

@@ -0,0 +1,24 @@
+import * as i0 from "@angular/core";
+/** Splits measured lines after hydration. The accessible text is read once. */
+export declare class HySplitText {
+  private readonly el;
+  private readonly motion;
+  private readonly destroyRef;
+  private readonly measure;
+  readonly text: import("@angular/core").InputSignal<string>;
+  protected readonly lines: import("@angular/core").WritableSignal<readonly string[]>;
+  private readonly entered;
+  private readonly ready;
+  private remeasure;
+  protected readonly shown: import("@angular/core").Signal<boolean>;
+  protected readonly words: import("@angular/core").Signal<string[]>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<HySplitText, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HySplitText, "hy-split-text", never, {
+    "text": {
+      "alias": "text";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

package/types/hyalo-angular-stat.d.ts

@@ -0,0 +1,56 @@
+import * as i0 from "@angular/core";
+export declare class HyStat {
+  readonly value: import("@angular/core").InputSignal<number>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly trend: import("@angular/core").InputSignal<string>;
+  readonly locale: import("@angular/core").InputSignal<string | undefined>;
+  readonly format: import("@angular/core").InputSignal<Intl.NumberFormatOptions>;
+  readonly animate: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly prefix: import("@angular/core").InputSignal<string>;
+  readonly suffix: import("@angular/core").InputSignal<string>;
+  readonly formatted: import("@angular/core").Signal<string>;
+  readonly accessible: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyStat, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyStat, "hy-stat", never, {
+    "value": {
+      "alias": "value";
+      "required": true;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "trend": {
+      "alias": "trend";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "format": {
+      "alias": "format";
+      "required": false;
+      "isSignal": true;
+    };
+    "animate": {
+      "alias": "animate";
+      "required": false;
+      "isSignal": true;
+    };
+    "prefix": {
+      "alias": "prefix";
+      "required": false;
+      "isSignal": true;
+    };
+    "suffix": {
+      "alias": "suffix";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

package/types/hyalo-angular-stepper.d.ts

@@ -0,0 +1,63 @@
+import * as i0 from "@angular/core";
+export declare class HyStep {
+  private readonly stepper;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly completed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly id: string;
+  protected readonly active: import("@angular/core").Signal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyStep, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyStep, "hy-step", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "completed": {
+      "alias": "completed";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/** Linear steps require each preceding step to be completed before advancing. */
+export declare class HyStepper {
+  private readonly el;
+  private readonly injector;
+  readonly label: import("@angular/core").InputSignal<string>;
+  readonly linear: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly selected: import("@angular/core").ModelSignal<number>;
+  readonly steps: import("@angular/core").Signal<readonly HyStep[]>;
+  protected readonly available: import("@angular/core").Signal<boolean[]>;
+  readonly activeIndex: import("@angular/core").Signal<number>;
+  select(index: number): void;
+  next(): void;
+  previous(): void;
+  protected onKey(event: KeyboardEvent, index: number): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyStepper, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyStepper, "hy-stepper", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "linear": {
+      "alias": "linear";
+      "required": false;
+      "isSignal": true;
+    };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selected": "selectedChange";
+  }, ["steps"], ["*"], true, never>;
+}
+export declare const HY_STEPPER: readonly [typeof HyStepper, typeof HyStep];

package/types/hyalo-angular-table.d.ts

@@ -0,0 +1,125 @@
+import * as i0 from "@angular/core";
+import { TemplateRef } from "@angular/core";
+export type HyRowKey = string | number;
+export interface HyTableCellContext<T> {
+  readonly $implicit: T;
+  readonly value: string | number | null;
+}
+export interface HyTableColumn<T> {
+  readonly id: string;
+  readonly header: string;
+  readonly cell: (row: T) => string | number | null;
+  readonly sortable?: boolean;
+  readonly compare?: (a: T, b: T) => number;
+  readonly align?: 'start' | 'end' | 'center';
+  readonly template?: TemplateRef<HyTableCellContext<T>>;
+}
+export interface HyTableSort {
+  readonly column: string;
+  readonly direction: 'asc' | 'desc';
+}
+export declare class HyTable<T> {
+  readonly data: import("@angular/core").InputSignal<readonly T[]>;
+  readonly columns: import("@angular/core").InputSignal<readonly HyTableColumn<T>[]>;
+  readonly rowKey: import("@angular/core").InputSignal<(row: T) => HyRowKey>;
+  readonly caption: import("@angular/core").InputSignal<string>;
+  readonly locale: import("@angular/core").InputSignal<string | undefined>;
+  private readonly globalLocale;
+  private readonly effectiveLocale;
+  readonly selectable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly stickyHeader: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly emptyLabel: import("@angular/core").InputSignal<string>;
+  readonly selectionLabel: import("@angular/core").InputSignal<string>;
+  readonly rowLabel: import("@angular/core").InputSignal<(row: T) => string>;
+  readonly selected: import("@angular/core").ModelSignal<readonly HyRowKey[]>;
+  readonly sort: import("@angular/core").ModelSignal<HyTableSort | null>;
+  private readonly selectedSet;
+  private readonly sorted;
+  readonly view: import("@angular/core").Signal<{
+    row: T;
+    key: HyRowKey;
+    label: string;
+    selected: boolean;
+    cells: {
+      column: HyTableColumn<T>;
+      value: string | number | null;
+    }[];
+  }[]>;
+  readonly allSelected: import("@angular/core").Signal<boolean>;
+  readonly someSelected: import("@angular/core").Signal<boolean>;
+  toggleSort(column: HyTableColumn<T>): void;
+  toggleRow(key: HyRowKey): void;
+  toggleAll(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyTable<any>, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyTable<any>, "hy-table", never, {
+    "data": {
+      "alias": "data";
+      "required": true;
+      "isSignal": true;
+    };
+    "columns": {
+      "alias": "columns";
+      "required": true;
+      "isSignal": true;
+    };
+    "rowKey": {
+      "alias": "rowKey";
+      "required": true;
+      "isSignal": true;
+    };
+    "caption": {
+      "alias": "caption";
+      "required": true;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectable": {
+      "alias": "selectable";
+      "required": false;
+      "isSignal": true;
+    };
+    "stickyHeader": {
+      "alias": "stickyHeader";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyLabel": {
+      "alias": "emptyLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectionLabel": {
+      "alias": "selectionLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "rowLabel": {
+      "alias": "rowLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "sort": {
+      "alias": "sort";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selected": "selectedChange";
+    "sort": "sortChange";
+  }, never, never, true, never>;
+}

package/types/hyalo-angular-tabs.d.ts

@@ -0,0 +1,102 @@
+import * as i1 from "@angular/aria/tabs";
+import { TabPanel } from "@angular/aria/tabs";
+import * as i0 from "@angular/core";
+/**
+ * One tab and its panel. The panel content is rendered up front and hidden
+ * with `inert` while another tab is selected.
+ */
+export declare class HyTab {
+  readonly panel: TabPanel;
+  /** Text of the tab button. */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Optional icon name shown before the label. */
+  readonly icon: import("@angular/core").InputSignal<string | undefined>;
+  /** Disables this tab. Arrow keys skip it. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyTab, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyTab, "hy-tab", never, {
+    "label": {
+      "alias": "label";
+      "required": true;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, [{
+    directive: typeof i1.TabPanel;
+    inputs: {
+      "value": "value";
+    };
+    outputs: {};
+  }]>;
+}
+/**
+ * Tabs with a sliding glass indicator, built on Angular Aria. Arrow keys
+ * move between tabs (mirrored in RTL), Home and End jump to the ends.
+ *
+ * ```html
+ * <hy-tabs label="Watch details" [(selected)]="tab">
+ *   <hy-tab value="overview" label="Overview">...</hy-tab>
+ *   <hy-tab value="specs" label="Specifications">...</hy-tab>
+ * </hy-tabs>
+ * ```
+ *
+ * With `selectionMode="follow"` (the default) a tab opens as soon as it is
+ * focused. Use `explicit` when panels are expensive, so users press Enter or
+ * Space to open one.
+ */
+export declare class HyTabs {
+  protected readonly tabs: import("@angular/core").Signal<readonly HyTab[]>;
+  private readonly list;
+  private readonly tabEls;
+  /** Accessible name for the tab list. */
+  readonly label: import("@angular/core").InputSignal<string | undefined>;
+  /** Value of the selected tab. Two-way bindable. Defaults to the first tab. */
+  readonly selected: import("@angular/core").ModelSignal<string | undefined>;
+  /** `follow` opens a tab on focus, `explicit` waits for Enter or Space. */
+  readonly selectionMode: import("@angular/core").InputSignal<"follow" | "explicit">;
+  /** Stretch tabs to fill the row. */
+  readonly stretch: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** The selected value, falling back to the first enabled tab. */
+  protected readonly current: import("@angular/core").Signal<string | undefined>;
+  protected readonly ready: import("@angular/core").Signal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyTabs, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyTabs, "hy-tabs", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectionMode": {
+      "alias": "selectionMode";
+      "required": false;
+      "isSignal": true;
+    };
+    "stretch": {
+      "alias": "stretch";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selected": "selectedChange";
+  }, ["tabs"], ["*"], true, [{
+    directive: typeof i1.Tabs;
+    inputs: {};
+    outputs: {};
+  }]>;
+}
+/** Everything needed to build tabs. */
+export declare const HY_TABS: readonly [typeof HyTabs, typeof HyTab];

package/types/hyalo-angular-theme.d.ts

@@ -0,0 +1,46 @@
+import * as i0 from "@angular/core";
+/** The palettes in `styles/palettes/`. Apps can add their own names too. */
+export type HyPaletteName = 'aurora' | 'ember' | 'orchid' | 'ocean' | 'rose' | 'graphite';
+/** Where a palette stylesheet is served from when no `paletteHref` is configured. */
+export declare function defaultPaletteHref(name: string): string;
+/**
+ * Switches palettes, loading each stylesheet the first time it is needed.
+ *
+ * Palettes are separate files in `styles/palettes/`, so they never add to
+ * the initial CSS. Their rules only match while `data-hy-palette` is on
+ * `<html>`, which means a loaded palette costs nothing until it is picked.
+ * The attribute is set only after the file has loaded, so the page never
+ * shows half a palette, and switching back to a palette is instant.
+ *
+ * To restore a saved palette before the app boots, an inline script can add
+ * `<link rel="stylesheet" data-hy-palette="ocean" href="...">` to the head
+ * and the attribute to `<html>`. HyPalette picks up both.
+ */
+export declare class HyPalette {
+  private readonly document;
+  private readonly config;
+  private readonly isBrowser;
+  private readonly loads;
+  private readonly _current;
+  private readonly _selected;
+  /** The palette on screen, or null for the built-in one. */
+  readonly current: import("@angular/core").Signal<string | null>;
+  /**
+   * The palette last asked for. It changes straight away, while `current`
+   * waits for the stylesheet, so a picker can show the choice immediately.
+   */
+  readonly selected: import("@angular/core").Signal<string | null>;
+  /**
+   * Loads a palette and applies it, or goes back to the built-in palette for
+   * null. When several calls overlap, the last one wins. Rejects when the
+   * stylesheet fails to load, and leaves the current palette in place. The
+   * exception is a palette restored before boot whose file never loaded: the
+   * page goes back to the built-in palette instead of claiming it.
+   */
+  use(name: HyPaletteName | (string & {}) | null): Promise<void>;
+  /** Starts loading a palette without applying it, for example on hover. */
+  preload(name: HyPaletteName | (string & {})): void;
+  private load;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyPalette, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}

package/types/hyalo-angular-timeline.d.ts

@@ -0,0 +1,36 @@
+import * as i0 from "@angular/core";
+export declare class HyTimeline {
+  readonly label: import("@angular/core").InputSignal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyTimeline, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyTimeline, "hy-timeline", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+export declare class HyTimelineItem {
+  readonly heading: import("@angular/core").InputSignal<string>;
+  readonly date: import("@angular/core").InputSignal<string>;
+  readonly dateTime: import("@angular/core").InputSignal<string | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyTimelineItem, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HyTimelineItem, "hy-timeline-item", never, {
+    "heading": {
+      "alias": "heading";
+      "required": true;
+      "isSignal": true;
+    };
+    "date": {
+      "alias": "date";
+      "required": false;
+      "isSignal": true;
+    };
+    "dateTime": {
+      "alias": "dateTime";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+export declare const HY_TIMELINE: readonly [typeof HyTimeline, typeof HyTimelineItem];

package/types/hyalo-angular-toast.d.ts

@@ -0,0 +1,79 @@
+import * as i0 from "@angular/core";
+/** Colour and icon of a toast. */
+export type HyToastTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/** What to show. */
+export interface HyToastOptions {
+  readonly message: string;
+  readonly title?: string;
+  readonly tone?: HyToastTone;
+  /**
+   * Milliseconds before it hides. 0 keeps it until dismissed. Defaults to
+   * 5000, or 0 when there is an action, so nobody has to race a timer.
+   */
+  readonly duration?: number;
+  /** One optional action, such as Undo. */
+  readonly action?: {
+    readonly label: string;
+    readonly run: () => void;
+  };
+}
+/** @internal One toast in the stack. */
+export interface HyToastItem extends HyToastOptions {
+  readonly id: number;
+  readonly leaving: boolean;
+}
+/** Handle to a shown toast. */
+export interface HyToastRef {
+  dismiss(): void;
+}
+/** @internal Why the timers are on hold. Hover and focus are tracked apart. */
+export type HyToastHold = 'hover' | 'focus';
+/**
+ * Shows toasts: short messages about something that just happened.
+ *
+ * ```ts
+ * toaster.show({ message: 'Address saved', tone: 'success' });
+ * toaster.show({ message: 'Draft deleted', action: { label: 'Undo', run: () => restore() } });
+ * ```
+ *
+ * Every toast is announced through the live announcer (`danger` toasts
+ * assertively, the rest politely). Timers pause while the pointer or focus
+ * is in the stack, and toasts can be swiped away. The stack sits at the
+ * bottom inline-end corner and is a labelled region, so keyboard and screen
+ * reader users can reach the actions.
+ */
+export declare class HyToaster {
+  private readonly injector;
+  private readonly announcer;
+  private readonly isBrowser;
+  private readonly timers;
+  private overlayRef;
+  private nextId;
+  private readonly holds;
+  /** @internal The current stack, newest last. */
+  readonly items: import("@angular/core").WritableSignal<readonly HyToastItem[]>;
+  /** Shows a toast. Does nothing during server rendering. */
+  show(options: HyToastOptions): HyToastRef;
+  success(message: string, title?: string): HyToastRef;
+  error(message: string, title?: string): HyToastRef;
+  /** Hides one toast with its exit animation, a fade with reduced motion. */
+  dismiss(id: number): void;
+  /** @internal Removes a toast that already left the screen, as after a swipe. */
+  discard(id: number): void;
+  private clearTimer;
+  /** Hides every toast. */
+  dismissAll(): void;
+  /**
+   * @internal Pauses all timers while the stack is hovered or focused. Each
+   * reason is held separately, so the pointer leaving does not restart the
+   * timers while focus is still on a toast.
+   */
+  pause(reason: HyToastHold): void;
+  /** @internal Releases one hold. Timers restart once no hold is left. */
+  resume(reason: HyToastHold): void;
+  private startTimer;
+  private remove;
+  private ensureStack;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HyToaster, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}

package/types/hyalo-angular.d.ts

@@ -0,0 +1,2 @@
+export * from "@hyalo/angular/core";
+export * from "@hyalo/angular/motion";