@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1,239 @@
+import * as i0 from "@angular/core";
+import { TemplateRef } from "@angular/core";
+/**
+ * Marks an `<ng-template>` as the rich header content for an `<lc-accordion>`.
+ *
+ * When present, the projected template is rendered inside the header button
+ * instead of the plain `title` string. The accordion still owns the disclosure
+ * chevron, click/keyboard handling and focus ring — the consumer only supplies
+ * the (non-interactive) inner content.
+ *
+ * A11y constraint: the header is itself a `<button>`, so the template must not
+ * contain nested interactive elements (no button/link/input). Text, badges and
+ * other non-interactive nodes only.
+ *
+ * @example
+ * ```html
+ * <lc-accordion variant="flat" chevronPosition="leading">
+ *   <ng-template lcAccordionHeader>
+ *     <span class="title">Item label</span>
+ *     <lc-badge variant="success" size="sm">Done</lc-badge>
+ *     <span style="margin-left: auto;">12:04</span>
+ *   </ng-template>
+ *   <div>Body…</div>
+ * </lc-accordion>
+ * ```
+ */
+export declare class AccordionHeaderDirective {
+  readonly template: TemplateRef<any>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<AccordionHeaderDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<AccordionHeaderDirective, "[lcAccordionHeader]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Marks an `<ng-template>` as the (optionally lazy) body content for an
+ * `<lc-accordion>`.
+ *
+ * Unlike default `<ng-content>` projection — which Angular always instantiates
+ * eagerly — a template referenced through this directive is only stamped out
+ * when the accordion decides to render its body. That is what makes
+ * `[lazy]="true"` and `[destroyOnClose]="true"` possible: expensive children
+ * (HTTP-backed panels, charts, live-polling views) are not created until the
+ * panel is first opened.
+ *
+ * @example
+ * ```html
+ * <lc-accordion [lazy]="true">
+ *   <ng-template lcAccordionContent>
+ *     <expensive-panel [id]="id" />
+ *   </ng-template>
+ * </lc-accordion>
+ * ```
+ */
+export declare class AccordionContentDirective {
+  readonly template: TemplateRef<any>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<AccordionContentDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<AccordionContentDirective, "[lcAccordionContent]", never, {}, {}, never, never, true, never>;
+}
+/** Where the disclosure chevron sits relative to the header content. */
+export type AccordionChevronPosition = 'leading' | 'trailing';
+/**
+ * Accordion component for collapsible content sections.
+ *
+ * Features:
+ * - Expandable/collapsible content panels
+ * - Two-way binding for expanded state
+ * - Animated expand/collapse transitions
+ * - Plain-string `title` **or** a rich projected header (`lcAccordionHeader`)
+ * - Eager `<ng-content>` body **or** lazy/destroyable template body
+ *   (`lcAccordionContent` + `[lazy]` / `[destroyOnClose]`)
+ * - Accessible: header is a real `<button>` inside a heading with
+ *   `aria-expanded` / `aria-controls`, keyboard support and a visible focus
+ *   ring; the collapsed panel is `inert` (not focusable, hidden from AT)
+ *
+ * @example Plain (unchanged, fully backward compatible)
+ * ```html
+ * <lc-accordion title="Section Title" [(expanded)]="isOpen">
+ *   <p>Collapsible content here</p>
+ * </lc-accordion>
+ * ```
+ *
+ * @example Rich header + lazy body
+ * ```html
+ * <lc-accordion variant="flat" chevronPosition="leading" [lazy]="true">
+ *   <ng-template lcAccordionHeader>
+ *     <span class="title">Item label</span>
+ *     <lc-badge variant="success" size="sm">Done</lc-badge>
+ *     <span style="margin-left: auto;">12:04</span>
+ *   </ng-template>
+ *   <ng-template lcAccordionContent>
+ *     <expensive-panel />
+ *   </ng-template>
+ * </lc-accordion>
+ * ```
+ */
+export declare class AccordionComponent {
+  /**
+   * Title displayed in the accordion header. Optional: when a
+   * `lcAccordionHeader` template is projected it takes precedence, and `title`
+   * (if set) becomes the header's accessible label fallback.
+   */
+  readonly title: import("@angular/core").InputSignal<string>;
+  /**
+   * Explicit accessible label for the header button. Use this when the header
+   * is a rich template with no meaningful plain-text title. Falls back to
+   * `title` when omitted.
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Whether the accordion is expanded (two-way binding) */
+  readonly expanded: import("@angular/core").ModelSignal<boolean>;
+  /** Visual variant */
+  readonly variant: import("@angular/core").InputSignal<"outlined" | "flat">;
+  /** Size of the header */
+  readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
+  /** Whether the accordion is disabled */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Heading level (1–6) announced for the header button, so the accordion
+   * fits into the surrounding document outline.
+   * @default 3
+   */
+  readonly headingLevel: import("@angular/core").InputSignal<1 | 2 | 3 | 4 | 5 | 6>;
+  /**
+   * Where the disclosure chevron sits. `'trailing'` (default) preserves the
+   * original layout. `'leading'` puts the chevron first so a right-aligned
+   * header element (e.g. a timestamp using `margin-left: auto`) stays pinned to
+   * the right edge.
+   */
+  readonly chevronPosition: import("@angular/core").InputSignal<AccordionChevronPosition>;
+  /**
+   * When `true`, a `lcAccordionContent` body is not instantiated until the
+   * panel is first expanded; once created it is kept in the DOM on collapse.
+   * Default `false` = today's behavior (projected immediately). Has no effect
+   * on default `<ng-content>` bodies, which Angular always projects eagerly.
+   */
+  readonly lazy: import("@angular/core").InputSignal<boolean>;
+  /**
+   * When `true`, a `lcAccordionContent` body is destroyed on collapse and
+   * recreated on the next open. Takes precedence over {@link lazy}.
+   */
+  readonly destroyOnClose: import("@angular/core").InputSignal<boolean>;
+  /** Rich header template, if projected via `lcAccordionHeader`. */
+  readonly headerTemplate: import("@angular/core").Signal<AccordionHeaderDirective | undefined>;
+  /** Lazy/deferred body template, if projected via `lcAccordionContent`. */
+  readonly contentTemplate: import("@angular/core").Signal<AccordionContentDirective | undefined>;
+  /** Stable ids wiring the header button to its panel for screen readers. */
+  protected readonly headerId: string;
+  protected readonly panelId: string;
+  /** Latches to `true` the first time the panel is opened (for lazy bodies). */
+  private readonly hasBeenOpened;
+  constructor();
+  /** Accessible label for the header button (explicit override, else title). */
+  protected readonly headerAriaLabel: import("@angular/core").Signal<string | null>;
+  /**
+   * Whether the `lcAccordionContent` body should currently be in the DOM.
+   * - `destroyOnClose`: only while expanded.
+   * - `lazy`: from the first open onward.
+   * - otherwise: always (eager).
+   */
+  protected readonly shouldRenderBody: import("@angular/core").Signal<boolean>;
+  /** Computed CSS classes */
+  protected accordionClasses: import("@angular/core").Signal<string>;
+  /** Toggle expanded state */
+  protected toggle(): void;
+  /** Handle keyboard events for accessibility */
+  protected onKeydown(event: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "lc-accordion", never, {
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "expanded": {
+      "alias": "expanded";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "headingLevel": {
+      "alias": "headingLevel";
+      "required": false;
+      "isSignal": true;
+    };
+    "chevronPosition": {
+      "alias": "chevronPosition";
+      "required": false;
+      "isSignal": true;
+    };
+    "lazy": {
+      "alias": "lazy";
+      "required": false;
+      "isSignal": true;
+    };
+    "destroyOnClose": {
+      "alias": "destroyOnClose";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "expanded": "expandedChange";
+  }, ["headerTemplate", "contentTemplate"], ["*"], true, never>;
+}
+export declare class AccordionGroupComponent {
+  /** When false (default), only one accordion can be expanded at a time. */
+  readonly multi: import("@angular/core").InputSignal<boolean>;
+  readonly accordions: import("@angular/core").Signal<readonly AccordionComponent[]>;
+  private previousExpanded;
+  constructor();
+  /** Collapse all accordions. */
+  collapseAll(): void;
+  /** Expand all accordions (only meaningful when multi=true). */
+  expandAll(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<AccordionGroupComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<AccordionGroupComponent, "lc-accordion-group", never, {
+    "multi": {
+      "alias": "multi";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["accordions"], ["*"], true, never>;
+}

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

@@ -0,0 +1,189 @@
+import * as i0 from "@angular/core";
+export type AlertVariant = 'success' | 'error' | 'warning' | 'info';
+/**
+ * Layout of the projected actions (`slot="action"`).
+ * - `inline`: one action right of the body, vertically centred (3.2)
+ * - `stacked`: the actions in their own row below the title and message;
+ *   below 576 px of alert width one per line at full width, 8 px apart,
+ *   from 576 px side by side at their natural width
+ */
+export type AlertActionsLayout = 'inline' | 'stacked';
+/**
+ * Alert component for inline notifications.
+ *
+ * Features:
+ * - Semantic variants (success, warning, error, info)
+ * - Optional title and icon display
+ * - Auto-mapped variant icons
+ * - Dismissible with close button; `visible` is two-way bindable so a
+ *   dismissed alert can be shown again
+ * - Content projection for custom body
+ * - Action slot for a button rendered right of the body (e.g. retry), or
+ *   several actions stacked below it (`actionsLayout="stacked"`)
+ * - The variant icon is decorative unless `iconAriaLabel` names it (the
+ *   title and the colour carry the tone; no built-in English word)
+ * - Accessible: `role="alert"` for error / warning, `role="status"` otherwise
+ *
+ * @example
+ * ```html
+ * <lc-alert variant="success" title="Success!" [dismissible]="true">
+ *   Your changes have been saved.
+ * </lc-alert>
+ *
+ * <lc-alert variant="error" title="Laden fehlgeschlagen">
+ *   Die Liste konnte nicht geladen werden.
+ *   <lc-button slot="action" variant="outline" size="sm">Erneut versuchen</lc-button>
+ * </lc-alert>
+ * ```
+ */
+export declare class AlertComponent {
+  /**
+   * Visual variant of the alert
+   * @default 'info'
+   */
+  variant: import("@angular/core").InputSignal<AlertVariant>;
+  /**
+   * Alert title (optional)
+   */
+  title: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Alert message (alternative to content projection)
+   */
+  message: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Icon to display (defaults based on variant)
+   */
+  icon: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Whether to show icon
+   * @default true
+   */
+  showIcon: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Accessible name of the variant icon, e.g. „Warnung“. Leave it unset when
+   * the title already says what kind of message this is: the icon is then
+   * decorative (`aria-hidden`). The kit sets no default text, so no English
+   * word is read on a page in another language.
+   */
+  iconAriaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Layout of the projected actions (`slot="action"`): `inline` — one action
+   * right of the body (3.2); `stacked` — the actions in their own row below
+   * the title and message, one per line at full width and 8 px apart below
+   * 576 px of alert width, side by side at their natural width from there.
+   * @default 'inline'
+   */
+  actionsLayout: import("@angular/core").InputSignal<AlertActionsLayout>;
+  /**
+   * Whether the alert can be dismissed
+   * @default false
+   */
+  dismissible: import("@angular/core").InputSignal<boolean>;
+  /**
+   * ARIA label for accessibility
+   */
+  ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /** Accessible name of the close button (`dismissible`). */
+  closeAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Emitted when alert is dismissed
+   */
+  readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * Visibility (two-way bindable). Dismissing sets it to `false`; the parent
+   * can set it back to `true` to show the alert again.
+   */
+  visible: import("@angular/core").ModelSignal<boolean>;
+  /**
+   * Computed host classes
+   */
+  protected hostClasses: import("@angular/core").Signal<string>;
+  /**
+   * Computed container classes
+   */
+  protected containerClasses: import("@angular/core").Signal<string>;
+  /** Whether the variant should interrupt the user (error / warning). */
+  private readonly isUrgent;
+  /**
+   * Live-region role: `alert` (assertive) only for error / warning,
+   * `status` (polite) for info / success.
+   */
+  protected role: import("@angular/core").Signal<"alert" | "status">;
+  /**
+   * Computed ARIA live region priority
+   */
+  protected ariaLive: import("@angular/core").Signal<"assertive" | "polite">;
+  /**
+   * Computed default icon based on variant
+   */
+  protected defaultIcon: import("@angular/core").Signal<string>;
+  /**
+   * Dismiss the alert
+   */
+  dismiss(): void;
+  /**
+   * Handle close button click
+   */
+  protected onCloseClick(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "lc-alert", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+      "isSignal": true;
+    };
+    "message": {
+      "alias": "message";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "showIcon": {
+      "alias": "showIcon";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconAriaLabel": {
+      "alias": "iconAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "actionsLayout": {
+      "alias": "actionsLayout";
+      "required": false;
+      "isSignal": true;
+    };
+    "dismissible": {
+      "alias": "dismissible";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeAriaLabel": {
+      "alias": "closeAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "visible": {
+      "alias": "visible";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "dismissed": "dismissed";
+    "visible": "visibleChange";
+  }, never, ["*", "[slot='action']"], true, never>;
+}

package/types/lifecorner-angular-ui-kit-app-shell.d.ts

@@ -0,0 +1,148 @@
+import * as i0 from "@angular/core";
+/**
+ * App shell: the frame around every page of an app — header, side navigation,
+ * page, bottom navigation bar, footer and the horizon — laid out for phones
+ * first, with the DOCUMENT scrolling (not an inner container), so the iOS
+ * status-bar tap, address-bar collapse and pull-to-refresh keep working.
+ *
+ * Slots (content projection by attribute):
+ * - `[shell-header]` — the `lc-header`; scrolls away with the page. Gets the
+ *   top, left and right safe-area insets.
+ * - `[shell-nav]` — the docked side navigation (`lc-sidenav mode="docked"
+ *   [isOpen]="true" width="100%" [mobileBreakpoint]="0"`), shown from
+ *   1024 px in a column of 240 px (248 from 1440, 280 from 1920; override
+ *   with `--lc-app-shell-nav-width`) and sticky once the header has gone.
+ *   An empty slot takes no column.
+ * - default — the page, usually an `lc-app-page` (or a `<router-outlet>`
+ *   whose pages use one). It spans to the window's right edge, so a page's
+ *   right column docks there.
+ * - `[shell-bottom-nav]` — the `lc-bottom-nav`, shown below 1024 px. The shell
+ *   reserves its height at the end of the page (16 + 72 + 24 px plus the
+ *   safe-area inset; `--lc-app-shell-bottom-clearance`), so it never covers
+ *   content. With the horizon, the bar rests on the land instead.
+ * - `[shell-footer]` — e.g. a compact `lc-footer`; on the horizon's land when
+ *   `horizon` is on, else after the page.
+ *
+ * `horizon` closes the page with the "Weite" horizon (`.lc-horizon` from the
+ * kit's styles): full-bleed, below the side navigation and the page, filling
+ * the rest of the screen — on Today, the sign-in pages and the shell pages.
+ *
+ * Needs `<meta name="viewport" content="width=device-width, initial-scale=1,
+ * viewport-fit=cover">` for the safe-area insets. Breakpoints are fixed
+ * (1024 px side navigation, 1440 / 1920 px widths), so the layout works
+ * before JavaScript runs (SSR, prerendering).
+ *
+ * @example
+ * ```html
+ * <lc-app-shell [horizon]="isToday()">
+ *   <lc-header shell-header variant="transparent" [sticky]="false" … />
+ *   <lc-sidenav shell-nav mode="docked" [isOpen]="true" width="100%" [mobileBreakpoint]="0"
+ *               variant="transparent" [items]="nav" [activeRoute]="url()" />
+ *   <router-outlet />
+ *   <lc-bottom-nav shell-bottom-nav variant="floating" [items]="nav" [activeRoute]="url()" />
+ * </lc-app-shell>
+ * ```
+ */
+export declare class AppShellComponent {
+  /**
+   * Close the page with the horizon (`.lc-horizon`): full width, below the
+   * side navigation and the page, filling the rest of the screen; the footer
+   * and the floating bar rest on its land.
+   */
+  readonly horizon: import("@angular/core").InputSignal<boolean>;
+  protected readonly shellClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<AppShellComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<AppShellComponent, "lc-app-shell", never, {
+    "horizon": {
+      "alias": "horizon";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[shell-header]", "[shell-nav]", "*", "[shell-footer]", "[shell-bottom-nav]"], true, never>;
+}
+/**
+ * A page inside `lc-app-shell`: the `<main>` landmark with the page's content
+ * centred at a reading width, and an optional right column docked to the
+ * window's right edge (LK-6).
+ *
+ * - `<main [id]="mainId">` holds the default slot as a column (24 px apart,
+ *   40 px from 1024 px), centred and capped at `contentMaxWidth` (880 px of
+ *   content). Side padding 24 · 32 · 48 · 56 · 72 · 96 px at 360 · 640 ·
+ *   1024 · 1280 · 1440 · 1920 px.
+ * - `[page-aside]` is the right column: an `<aside>` AFTER `<main>` in the DOM,
+ *   shown from 1280 px at 360 px (400 from 1440, 460 from 1920; override
+ *   with `--lc-app-page-aside-width`), with a tint and a hairline that fade
+ *   downwards; inside `lc-app-shell` they start at the top of the window,
+ *   behind a transparent header. Below 1280 px it is hidden: show the page's narrow equivalent
+ *   inside main instead (e.g. a member row). It renders only with an
+ *   accessible name — `asideLabelledby` (the id of its heading) or
+ *   `asideAriaLabel`.
+ * - `busy` marks the page as loading: `aria-busy="true"` on `<main>` while a
+ *   skeleton stands in for the content (AS-12). No visual change.
+ *
+ * @example
+ * ```html
+ * <lc-app-page asideLabelledby="members-title">
+ *   <lc-page-header … />
+ *   <lc-next-step-card … />
+ *   <section page-aside>
+ *     <h2 id="members-title">Mitglieder</h2>
+ *     <lc-list [items]="members" />
+ *   </section>
+ * </lc-app-page>
+ * ```
+ */
+export declare class AppPageComponent {
+  /** Id of the `<main>` element (the skip link's target). */
+  readonly mainId: import("@angular/core").InputSignal<string>;
+  /**
+   * Widest the page content gets (CSS length; `none` for no cap). The default
+   * keeps lines readable on wide screens: the page gains air, not line length.
+   */
+  readonly contentMaxWidth: import("@angular/core").InputSignal<string>;
+  /** Id of the heading that names the right column (`aria-labelledby`). */
+  readonly asideLabelledby: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the right column when it has no visible heading. */
+  readonly asideAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Marks the page as loading: `aria-busy="true"` on its `<main>` while
+   * `true`, no attribute while `false`. Set it while a skeleton stands in for
+   * the content. Screen readers may hold back changes inside a busy region
+   * until it clears, so a loading message that must be heard belongs outside
+   * `<main>` (for example a `.sr-only` `role="status"` next to the page) or is
+   * static text. No visual change.
+   * @default false
+   */
+  readonly busy: import("@angular/core").InputSignal<boolean>;
+  /** The right column renders only when it has an accessible name. */
+  protected readonly hasAside: import("@angular/core").Signal<boolean>;
+  protected readonly pageClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<AppPageComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<AppPageComponent, "lc-app-page", never, {
+    "mainId": {
+      "alias": "mainId";
+      "required": false;
+      "isSignal": true;
+    };
+    "contentMaxWidth": {
+      "alias": "contentMaxWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "asideLabelledby": {
+      "alias": "asideLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "asideAriaLabel": {
+      "alias": "asideAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "busy": {
+      "alias": "busy";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*", "[page-aside]"], true, never>;
+}