@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/types/lifecorner-angular-ui-kit-header.d.ts

@@ -0,0 +1,496 @@
+import { AvatarColor } from "@lifecorner/angular-ui-kit/avatar";
+import { MenuItem } from "@lifecorner/angular-ui-kit/menu";
+import { ThemeService } from "@lifecorner/angular-ui-kit/theme";
+import * as i0 from "@angular/core";
+/** A link in the header's main navigation (`navItems`). */
+export interface HeaderNavItem {
+  /** Visible link text. */
+  label: string;
+  /** Plain URL — rendered as a native `href`, no router involved. */
+  href: string;
+  /** Marks the page the visitor is on (`aria-current="page"` + underline). */
+  current?: boolean;
+}
+/** Element used for the header title (`titleTag`). */
+export type HeaderTitleTag = 'h1' | 'h2' | 'h3' | 'p' | 'span' | 'div';
+/**
+ * Surface of the header: `default` is the bar on `--color-surface` with a
+ * bottom border; `transparent` has no background and no border, for a header
+ * that sits on the page ("Weite").
+ */
+export type HeaderVariant = 'default' | 'transparent';
+/**
+ * What the account-menu button shows: `icon` (a user icon and a chevron) or
+ * `avatar` (the person's initials avatar, `userName`, `userAvatarSrc`,
+ * `userAvatarColor`, in a 48 px round button).
+ */
+export type HeaderUserMenuTrigger = 'icon' | 'avatar';
+/**
+ * AppHeaderComponent - Global application header for the LifeCorner shell
+ *
+ * Features:
+ * - Clickable logo for home navigation
+ * - Optional title and subtitle display
+ * - User profile dropdown with avatar, name, email, optional Profile link, and Logout
+ * - Optional theme toggle button in header. By default the button toggles the
+ *   `ThemeService` itself and additionally emits `themeToggleClick`, so the
+ *   handler must NOT toggle again (that would undo the switch). To own the
+ *   toggling in the app, set `[autoToggleTheme]="false"` and toggle in the
+ *   handler.
+ * - Hamburger menu toggle for mobile sidebar; bind `sidenavOpen` (and
+ *   `sidenavId`) so the toggle exposes `aria-expanded` / `aria-controls`.
+ * - OnPush change detection for performance
+ *
+ * Public, prerendered sites (no router, no JavaScript needed):
+ * - `homeHref` makes the brand a plain link (instead of `routerLink="/"`).
+ * - `navItems` render a labelled main navigation (`<nav aria-label><ul>` with
+ *   `aria-current="page"` on the current item); below 1024 px it moves to a
+ *   second row and wraps.
+ * - `[slot='end']` takes content at the end of the first row (e.g. a language
+ *   link), `showUserMenu` hides the account menu, `titleTag` picks the title
+ *   element (the page keeps its own `<h1>`), `sticky` can be switched off.
+ * App shell ("Weite", kit 3.3):
+ * - `variant="transparent"`: no background and no border, the header sits on
+ *   the page (pair it with `[sticky]="false"`, a header without a surface
+ *   cannot stay over scrolling text).
+ * - `userMenuTrigger="avatar"`: the account button is the person's initials
+ *   avatar (`userAvatarColor` for the member colour, `userAvatarSrc` for a
+ *   photo) in a 48 px round button; the icon trigger is 44 px high in every
+ *   density.
+ * - The subtitle (e.g. a household name) stays on one line and ends with "…";
+ *   the full text is its `title` and stays in the accessible text. It is shown
+ *   as typed (no uppercase).
+ * - The account menu is at most `min(18rem, 100vw − 2rem)` wide; the name and
+ *   email in its header wrap instead of being cut.
+ * - Every built-in label is an input (`homeAriaLabel`, `hamburgerAriaLabel`,
+ *   `userMenuAriaLabel`, `navAriaLabel`, `profileLabel`, `logoutLabel`,
+ *   `themeToDarkAriaLabel`, `themeToLightAriaLabel`, `contextAriaLabel`);
+ *   the defaults stay English.
+ * - The `ThemeService` (which persists to localStorage) is only created when
+ *   the theme button is shown.
+ *
+ * @example
+ * ```html
+ * <lc-header
+ *   [logo]="'/assets/logo.svg'"
+ *   [title]="'LifeCorner'"
+ *   [subtitle]="'User Profile'"
+ *   [userName]="'John Doe'"
+ *   [userEmail]="'user@example.com'"
+ *   [showHamburger]="true"
+ *   [sidenavOpen]="sidenavOpen"
+ *   sidenavId="app-sidenav"
+ *   [showThemeButton]="true"
+ *   [showProfileMenuItem]="true"
+ *   (hamburgerClick)="toggleSidebar()"
+ *   (themeToggleClick)="trackThemeToggle()"
+ *   (profileClick)="navigateToProfile()"
+ *   (logoutClick)="handleLogout()"
+ * />
+ *
+ * <!-- App-controlled theme: the header only reports the click -->
+ * <lc-header
+ *   [showThemeButton]="true"
+ *   [autoToggleTheme]="false"
+ *   (themeToggleClick)="toggleTheme()"
+ * />
+ *
+ * <!-- Public site: plain links, labelled nav, language link at the end -->
+ * <lc-header
+ *   size="sm"
+ *   [sticky]="false"
+ *   [showUserMenu]="false"
+ *   homeHref="/de/"
+ *   homeAriaLabel="Produkt – Startseite"
+ *   navAriaLabel="Hauptnavigation"
+ *   [navItems]="[
+ *     { label: 'Sicherheit', href: '/de/sicherheit', current: true },
+ *     { label: 'Roadmap', href: '/de/roadmap' }
+ *   ]"
+ * >
+ *   <a slot="end" lcButton variant="ghost" href="/en/security" hreflang="en" lang="en">English</a>
+ * </lc-header>
+ * ```
+ */
+export declare class HeaderComponent {
+  readonly theme: import("@angular/core").InputSignal<"light" | "dark" | "auto">;
+  readonly logo: import("@angular/core").InputSignal<string>;
+  /**
+   * Render the brand block. On its own this shows the emblem; with `logo` set
+   * it shows the full lockup. (It used to additionally require `logo` or
+   * `title`, so `showLogo` alone rendered an empty 0px-wide brand area with no
+   * error — an app could end up with no branding at all and no clue why.)
+   */
+  readonly showLogo: import("@angular/core").InputSignal<boolean>;
+  /** Custom URL for the full brand logo (forwarded to inner `<lc-logo>`). */
+  readonly logoSrc: import("@angular/core").InputSignal<string>;
+  /** Custom URL for the emblem-only brand logo. */
+  readonly logoEmblemSrc: import("@angular/core").InputSignal<string>;
+  /** Optional dark-theme URL for the full brand logo. */
+  readonly logoDarkSrc: import("@angular/core").InputSignal<string>;
+  /** Optional dark-theme URL for the emblem-only brand logo. */
+  readonly logoDarkEmblemSrc: import("@angular/core").InputSignal<string>;
+  /** Alt text for the brand logo (forwarded to inner `<lc-logo>`). */
+  readonly logoAlt: import("@angular/core").InputSignal<string>;
+  /** Size of the brand logo (forwarded to inner `<lc-logo>`). Defaults to `md`. */
+  readonly logoSize: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg" | "xl">;
+  /**
+   * Overall header height. Useful to align the header with a sidebar brand block.
+   * Maps to the same `min-height` scale the sidenav logo area uses:
+   * `sm` 56px · `md` 64px (default) · `lg` 80px · `xl` 112px.
+   */
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg" | "xl">;
+  readonly title: import("@angular/core").InputSignal<string>;
+  /**
+   * Surface: `default` (the bar on `--color-surface` with a bottom border) or
+   * `transparent` (no background, no border — the header sits on the page).
+   */
+  readonly variant: import("@angular/core").InputSignal<HeaderVariant>;
+  /**
+   * Element for the title. `h1` keeps the app-shell behaviour; on a site whose
+   * pages carry their own `<h1>`, use `span` (or `p`/`div`).
+   */
+  readonly titleTag: import("@angular/core").InputSignal<HeaderTitleTag>;
+  /**
+   * Second line under the title (e.g. the household name). One line, cut
+   * with "…" when it does not fit; the full text is its `title` attribute.
+   * Shown as typed.
+   */
+  readonly subtitle: import("@angular/core").InputSignal<string>;
+  readonly userEmail: import("@angular/core").InputSignal<string>;
+  readonly userName: import("@angular/core").InputSignal<string>;
+  /**
+   * What the account-menu button shows: `icon` (user icon and chevron) or
+   * `avatar` (the initials of `userName` in a 48 px round button).
+   */
+  readonly userMenuTrigger: import("@angular/core").InputSignal<HeaderUserMenuTrigger>;
+  /** Photo for the account avatar (trigger and menu header); initials when empty or broken. */
+  readonly userAvatarSrc: import("@angular/core").InputSignal<string>;
+  /** Colour of the account avatar's initials: `default` or a member colour `member-1` … `member-6`. */
+  readonly userAvatarColor: import("@angular/core").InputSignal<AvatarColor>;
+  readonly showHamburger: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Open state of the sidenav the hamburger controls. When bound, the toggle
+   * announces it via `aria-expanded`; leave `undefined` when the header does
+   * not know (the attribute is then omitted rather than lying).
+   */
+  readonly sidenavOpen: import("@angular/core").InputSignal<boolean | undefined>;
+  /** DOM id of the sidenav the hamburger controls (`aria-controls`). */
+  readonly sidenavId: import("@angular/core").InputSignal<string>;
+  readonly showThemeButton: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the theme button toggles the `ThemeService` itself before emitting
+   * `themeToggleClick`. Set to `false` when the app owns the theme switch and
+   * toggles in the `(themeToggleClick)` handler — otherwise both would toggle
+   * and the click would be a no-op.
+   */
+  readonly autoToggleTheme: import("@angular/core").InputSignal<boolean>;
+  readonly contextName: import("@angular/core").InputSignal<string>;
+  readonly contextLabel: import("@angular/core").InputSignal<string>;
+  readonly menuSize: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
+  readonly showProfileMenuItem: import("@angular/core").InputSignal<boolean>;
+  /** Render the account menu (avatar trigger with Profile/Logout). */
+  readonly showUserMenu: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Plain URL for the brand link. When set, the brand is a native
+   * `<a href>` — no router needed (static or prerendered sites). Empty keeps
+   * `routerLink="/"`.
+   */
+  readonly homeHref: import("@angular/core").InputSignal<string>;
+  /**
+   * Main navigation links, rendered as `<nav><ul><li><a href>` with
+   * `aria-current="page"` on the current one. On screens below 1024 px the
+   * navigation takes a second row and wraps.
+   */
+  readonly navItems: import("@angular/core").InputSignal<readonly HeaderNavItem[]>;
+  /** Keep the header at the top while scrolling (`position: sticky`). */
+  readonly sticky: import("@angular/core").InputSignal<boolean>;
+  /** Accessible name of the brand link. */
+  readonly homeAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the hamburger button. */
+  readonly hamburgerAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the account menu trigger. */
+  readonly userMenuAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the `<nav>` around `navItems`. */
+  readonly navAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Label of the theme button while the light theme is active. */
+  readonly themeToDarkAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Label of the theme button while the dark theme is active. */
+  readonly themeToLightAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the context button (`contextName`). */
+  readonly contextAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Label of the Profile entry in the account menu. */
+  readonly profileLabel: import("@angular/core").InputSignal<string>;
+  /** Label of the Logout entry in the account menu. */
+  readonly logoutLabel: import("@angular/core").InputSignal<string>;
+  readonly hamburgerClick: import("@angular/core").OutputEmitterRef<void>;
+  readonly themeToggleClick: import("@angular/core").OutputEmitterRef<void>;
+  readonly logoutClick: import("@angular/core").OutputEmitterRef<void>;
+  readonly profileClick: import("@angular/core").OutputEmitterRef<void>;
+  readonly contextClick: import("@angular/core").OutputEmitterRef<void>;
+  private readonly injector;
+  private themeServiceInstance;
+  /**
+   * Resolved on first use, i.e. only when the theme button is shown: creating
+   * the ThemeService reads and writes the theme class and localStorage, which a
+   * site without a theme switch must not do.
+   */
+  protected get themeService(): ThemeService;
+  private readonly hamburger;
+  constructor();
+  /**
+   * Get menu items for profile dropdown
+   */
+  protected readonly menuItems: import("@angular/core").Signal<MenuItem[]>;
+  /**
+   * Dropdown open state (using Angular signals)
+   */
+  private readonly dropdownOpen;
+  /**
+   * Get dropdown open state
+   */
+  isDropdownOpen(): boolean;
+  /**
+   * Toggle profile dropdown visibility
+   */
+  toggleDropdown(): void;
+  /**
+   * Close profile dropdown
+   */
+  closeDropdown(): void;
+  /**
+   * Handle hamburger click
+   */
+  onHamburgerClick(): void;
+  /**
+   * Handle theme button click (separate button, not in menu). Toggles the
+   * theme unless the app opted out via `autoToggleTheme`, then emits.
+   */
+  onThemeButtonClick(): void;
+  /**
+   * Handle logout click
+   */
+  onLogoutClick(): void;
+  /**
+   * Handle profile click
+   */
+  onProfileClick(): void;
+  /**
+   * Handle menu item click
+   */
+  onMenuItemClick(item: MenuItem): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HeaderComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "lc-header", never, {
+    "theme": {
+      "alias": "theme";
+      "required": false;
+      "isSignal": true;
+    };
+    "logo": {
+      "alias": "logo";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLogo": {
+      "alias": "showLogo";
+      "required": false;
+      "isSignal": true;
+    };
+    "logoSrc": {
+      "alias": "logoSrc";
+      "required": false;
+      "isSignal": true;
+    };
+    "logoEmblemSrc": {
+      "alias": "logoEmblemSrc";
+      "required": false;
+      "isSignal": true;
+    };
+    "logoDarkSrc": {
+      "alias": "logoDarkSrc";
+      "required": false;
+      "isSignal": true;
+    };
+    "logoDarkEmblemSrc": {
+      "alias": "logoDarkEmblemSrc";
+      "required": false;
+      "isSignal": true;
+    };
+    "logoAlt": {
+      "alias": "logoAlt";
+      "required": false;
+      "isSignal": true;
+    };
+    "logoSize": {
+      "alias": "logoSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "titleTag": {
+      "alias": "titleTag";
+      "required": false;
+      "isSignal": true;
+    };
+    "subtitle": {
+      "alias": "subtitle";
+      "required": false;
+      "isSignal": true;
+    };
+    "userEmail": {
+      "alias": "userEmail";
+      "required": false;
+      "isSignal": true;
+    };
+    "userName": {
+      "alias": "userName";
+      "required": false;
+      "isSignal": true;
+    };
+    "userMenuTrigger": {
+      "alias": "userMenuTrigger";
+      "required": false;
+      "isSignal": true;
+    };
+    "userAvatarSrc": {
+      "alias": "userAvatarSrc";
+      "required": false;
+      "isSignal": true;
+    };
+    "userAvatarColor": {
+      "alias": "userAvatarColor";
+      "required": false;
+      "isSignal": true;
+    };
+    "showHamburger": {
+      "alias": "showHamburger";
+      "required": false;
+      "isSignal": true;
+    };
+    "sidenavOpen": {
+      "alias": "sidenavOpen";
+      "required": false;
+      "isSignal": true;
+    };
+    "sidenavId": {
+      "alias": "sidenavId";
+      "required": false;
+      "isSignal": true;
+    };
+    "showThemeButton": {
+      "alias": "showThemeButton";
+      "required": false;
+      "isSignal": true;
+    };
+    "autoToggleTheme": {
+      "alias": "autoToggleTheme";
+      "required": false;
+      "isSignal": true;
+    };
+    "contextName": {
+      "alias": "contextName";
+      "required": false;
+      "isSignal": true;
+    };
+    "contextLabel": {
+      "alias": "contextLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "menuSize": {
+      "alias": "menuSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "showProfileMenuItem": {
+      "alias": "showProfileMenuItem";
+      "required": false;
+      "isSignal": true;
+    };
+    "showUserMenu": {
+      "alias": "showUserMenu";
+      "required": false;
+      "isSignal": true;
+    };
+    "homeHref": {
+      "alias": "homeHref";
+      "required": false;
+      "isSignal": true;
+    };
+    "navItems": {
+      "alias": "navItems";
+      "required": false;
+      "isSignal": true;
+    };
+    "sticky": {
+      "alias": "sticky";
+      "required": false;
+      "isSignal": true;
+    };
+    "homeAriaLabel": {
+      "alias": "homeAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "hamburgerAriaLabel": {
+      "alias": "hamburgerAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "userMenuAriaLabel": {
+      "alias": "userMenuAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "navAriaLabel": {
+      "alias": "navAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "themeToDarkAriaLabel": {
+      "alias": "themeToDarkAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "themeToLightAriaLabel": {
+      "alias": "themeToLightAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "contextAriaLabel": {
+      "alias": "contextAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "profileLabel": {
+      "alias": "profileLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "logoutLabel": {
+      "alias": "logoutLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "hamburgerClick": "hamburgerClick";
+    "themeToggleClick": "themeToggleClick";
+    "logoutClick": "logoutClick";
+    "profileClick": "profileClick";
+    "contextClick": "contextClick";
+  }, never, ["[slot='end']"], true, never>;
+}

package/types/lifecorner-angular-ui-kit-heatmap.d.ts

@@ -0,0 +1,126 @@
+import { ChartValueFormatter } from "@lifecorner/angular-ui-kit/internal/chart";
+import * as i0 from "@angular/core";
+export interface HeatmapCell {
+  row: number;
+  col: number;
+  value: number;
+}
+export declare class HeatmapComponent {
+  /** 2D data: array of rows, each row an array of values. */
+  data: import("@angular/core").InputSignal<number[][]>;
+  /** Row labels (Y axis). */
+  rowLabels: import("@angular/core").InputSignal<string[]>;
+  /** Column labels (X axis). */
+  colLabels: import("@angular/core").InputSignal<string[]>;
+  /** Cell size in pixels. */
+  cellSize: import("@angular/core").InputSignal<number>;
+  /** Gap between cells in pixels. */
+  cellGap: import("@angular/core").InputSignal<number>;
+  /** Low-value color (the fill of the minimum value). */
+  colorMin: import("@angular/core").InputSignal<string>;
+  /** High-value color (the fill of the maximum value). */
+  colorMax: import("@angular/core").InputSignal<string>;
+  /** Show values inside cells. */
+  showValues: import("@angular/core").InputSignal<boolean>;
+  /** Corner radius of cells. */
+  cellRadius: import("@angular/core").InputSignal<number>;
+  /** Formats cell values. Defaults to a float-safe `String(value)`. */
+  formatValue: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /**
+   * Accessible name of the chart. Defaults to a generated summary of the grid
+   * shape and value range, e.g. "Heatmap: 5 rows by 7 columns, values from 0 to 15".
+   */
+  ariaLabel: import("@angular/core").InputSignal<string>;
+  private readonly LABEL_W;
+  private readonly LABEL_H;
+  /** Rows with every value coerced to a finite number (holes → 0). */
+  private readonly cleanData;
+  protected readonly minVal: import("@angular/core").Signal<number>;
+  protected readonly maxVal: import("@angular/core").Signal<number>;
+  protected readonly rows: import("@angular/core").Signal<number>;
+  protected readonly cols: import("@angular/core").Signal<number>;
+  protected readonly svgWidth: import("@angular/core").Signal<number>;
+  protected readonly svgHeight: import("@angular/core").Signal<number>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  protected readonly offsetX: import("@angular/core").Signal<60 | 0>;
+  protected readonly offsetY: import("@angular/core").Signal<20 | 0>;
+  protected readonly cells: import("@angular/core").Signal<{
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    value: number;
+    valueText: string;
+    fill: string;
+    ink: string;
+  }[]>;
+  protected readonly rowLabelItems: import("@angular/core").Signal<{
+    x: number;
+    y: number;
+    label: string;
+  }[]>;
+  protected readonly colLabelItems: import("@angular/core").Signal<{
+    x: number;
+    y: number;
+    label: string;
+  }[]>;
+  protected readonly effectiveAriaLabel: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HeatmapComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HeatmapComponent, "lc-heatmap", never, {
+    "data": {
+      "alias": "data";
+      "required": true;
+      "isSignal": true;
+    };
+    "rowLabels": {
+      "alias": "rowLabels";
+      "required": false;
+      "isSignal": true;
+    };
+    "colLabels": {
+      "alias": "colLabels";
+      "required": false;
+      "isSignal": true;
+    };
+    "cellSize": {
+      "alias": "cellSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "cellGap": {
+      "alias": "cellGap";
+      "required": false;
+      "isSignal": true;
+    };
+    "colorMin": {
+      "alias": "colorMin";
+      "required": false;
+      "isSignal": true;
+    };
+    "colorMax": {
+      "alias": "colorMax";
+      "required": false;
+      "isSignal": true;
+    };
+    "showValues": {
+      "alias": "showValues";
+      "required": false;
+      "isSignal": true;
+    };
+    "cellRadius": {
+      "alias": "cellRadius";
+      "required": false;
+      "isSignal": true;
+    };
+    "formatValue": {
+      "alias": "formatValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}