@lifecorner/angular-ui-kit 3.35.0 → 3.37.0

package/types/lifecorner-angular-ui-kit-stacked-bar-chart.d.ts

@@ -10,6 +10,11 @@ export interface StackedBarLegend {
   color?: string;
 }
 export type StackedBarOrientation = 'vertical' | 'horizontal';
+/**
+ * Form of `lc-stacked-bar-chart` (3.36): `chart` (axes, grid, labels and
+ * paddings, as before) or `band` (one horizontal bar edge to edge).
+ */
+export type StackedBarVariant = 'chart' | 'band';
 export declare class StackedBarChartComponent {
   private readonly _el;
   private readonly _destroyRef;
@@ -42,6 +47,32 @@ export declare class StackedBarChartComponent {
    * series names and every category's total.
    */
   ariaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Form of the chart (3.36, cockpit row 2). `chart`: axes, grid, labels and
+   * paddings, as before. `band`: one horizontal bar that fills the host's
+   * width edge to edge, `height` px thick, scaled from 0 to the sum of the
+   * values, without axes, grid, labels, values or paddings; the parts are
+   * split by a 2 px gap in the surface colour (CSS hooks
+   * `--lc-stacked-bar-chart-band-gap`, default `2px`, and
+   * `--lc-stacked-bar-chart-band-gap-color`, default `var(--color-surface)`:
+   * set it to the band's background off a card). `ariaLabel`, `legends` and
+   * the legend work as in `chart`. Needs exactly one category (otherwise it
+   * renders as `chart`, with a warning in dev mode); `orientation` is
+   * ignored; negative values draw nothing, and a sum of 0 draws no parts.
+   * Part widths are percentages, so the band is exact in prerendered HTML.
+   * @default 'chart'
+   */
+  variant: import("@angular/core").InputSignal<StackedBarVariant>;
+  /** `band` with exactly one category (3.36); otherwise the chart renders. */
+  protected readonly isBand: import("@angular/core").Signal<boolean>;
+  /** The band's parts as percentages of the width: 0 … sum of the positive values. */
+  protected readonly bandParts: import("@angular/core").Signal<{
+    x: number;
+    w: number;
+    color: string;
+  }[]>;
+  /** The boundaries between two drawn parts, where the band's gap lines sit. */
+  protected readonly bandGaps: import("@angular/core").Signal<number[]>;
   private readonly PL;
   private readonly PR;
   private readonly PT;
@@ -167,5 +198,10 @@ export declare class StackedBarChartComponent {
       "required": false;
       "isSignal": true;
     };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }

package/types/lifecorner-angular-ui-kit-state-strip.d.ts

@@ -0,0 +1,125 @@
+import * as i0 from "@angular/core";
+/** State of one run in `lc-state-strip` (3.36). */
+export type StateStripState = 'success' | 'warning' | 'error' | 'neutral';
+/** One run of `lc-state-strip`: its state, and a `label` that names it („Mo 06.10., 06:00“). */
+export interface StateStripSegment {
+  state: StateStripState;
+  label: string;
+}
+/** The words of the four states, for the counts and the segment names. */
+export type StateStripLabels = Record<StateStripState, string>;
+/** English state words of `lc-state-strip`; pass `stateLabels` for another language. */
+export declare const DEFAULT_STATE_STRIP_LABELS: Readonly<StateStripLabels>;
+/**
+ * The states of the last runs at a glance (3.36, quellen row 1): one segment
+ * per run, oldest first. The state is a shape, not only a colour: success a
+ * block in the upper half, error one in the lower half, warning a centred
+ * block, neutral a flat dash, so the strip reads without hue and in forced
+ * colours.
+ *
+ * Accessibility: an APG single-row grid. The strip is named by `ariaLabel`
+ * and the count per state („Letzte 10 Ladeläufe, 9 geladen, 1
+ * fehlgeschlagen“); each segment is a grid cell named by its `label` and
+ * state word. One Tab stop (the newest run first), Arrow Left/Right, Home and
+ * End move between the runs, Escape hides the caption. Hovering or focusing a
+ * segment shows its name below the strip (hidden from screen readers, which
+ * read the cell). 3.37: the pointer uses the whole strip (one layer over the
+ * row picks the run under it), so dense strips need no 24 px cells.
+ *
+ * Without segments it renders nothing. The segments are in the prerendered
+ * HTML. CSS hooks: `--lc-state-strip-height` (default `2rem`) and
+ * `--lc-state-strip-segment-max-width` (default `1.5rem`; more segments than
+ * fit share the width, never overflowing).
+ *
+ * @example
+ * ```html
+ * <lc-state-strip
+ *   ariaLabel="Letzte 10 Ladeläufe"
+ *   [stateLabels]="{ success: 'geladen', warning: 'teilweise geladen', error: 'fehlgeschlagen', neutral: 'ausstehend' }"
+ *   [segments]="runs"
+ * />
+ * ```
+ */
+export declare class StateStripComponent {
+  /**
+   * The runs, in order, oldest first: one segment each. Empty renders nothing
+   * (no box, no accessibility node).
+   *
+   * More runs than fit at 24 px (13 and more in 328 px) narrow the cells below
+   * 24 px; the pointer then uses the whole strip: pointing at it, or sliding a
+   * pressed finger along it, shows that run; the keyboard moves with the
+   * arrows (3.37).
+   * @default []
+   */
+  readonly segments: import("@angular/core").InputSignal<readonly StateStripSegment[]>;
+  /**
+   * Start of the strip's accessible name; the count per state follows it
+   * („Letzte 10 Ladeläufe, 9 geladen, 1 fehlgeschlagen“).
+   * @default ''
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * The state words for the counts and the segment names, over the English
+   * defaults (`DEFAULT_STATE_STRIP_LABELS`: succeeded, with warnings, failed,
+   * pending). German: `{ success: 'geladen', warning: 'teilweise geladen',
+   * error: 'fehlgeschlagen', neutral: 'ausstehend' }`.
+   * @default {}
+   */
+  readonly stateLabels: import("@angular/core").InputSignal<Partial<StateStripLabels>>;
+  private readonly cellEls;
+  /** The state words in use. */
+  private readonly words;
+  /** One entry per segment: its state (unknown states draw as neutral) and its name. */
+  protected readonly cells: import("@angular/core").Signal<{
+    state: StateStripState;
+    name: string;
+  }[]>;
+  /** The strip's name: `ariaLabel`, then the count per state (0 left out). */
+  protected readonly gridLabel: import("@angular/core").Signal<string>;
+  /** The roving Tab stop: the newest run until the user moves. */
+  protected readonly current: import("@angular/core").WritableSignal<number>;
+  /** The segment under the pointer, the one with focus, and whether Escape hid the caption. */
+  protected readonly hovered: import("@angular/core").WritableSignal<number | null>;
+  private readonly focused;
+  private readonly dismissed;
+  /** The segment whose name the caption shows, if any. */
+  private readonly captionIndex;
+  /** The caption's text: the name of the hovered or focused segment ('' hides it). */
+  protected readonly caption: import("@angular/core").Signal<string>;
+  protected onFocus(index: number): void;
+  protected onBlur(): void;
+  protected onPointerEnter(index: number): void;
+  protected onPointerLeave(): void;
+  /** The run the scrub layer last picked; a move within it changes nothing (as entering a cell). */
+  private scrubbed;
+  /**
+   * The pointer over the strip (3.37, request 057, 056 S-1): the run whose
+   * cell spans the pointer's x shows in the caption; outside every cell none.
+   */
+  protected onScrubMove(event: PointerEvent): void;
+  /** Releasing the pointer (a click, a lifted finger) focuses the run under it. */
+  protected onScrubUp(event: PointerEvent): void;
+  protected onScrubLeave(): void;
+  /** The index of the cell whose box spans `x`, any writing direction. */
+  private cellAt;
+  /** Arrow Left/Right, Home, End move between the runs (no wrap); Escape hides the caption. */
+  protected onKeydown(event: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<StateStripComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<StateStripComponent, "lc-state-strip", never, {
+    "segments": {
+      "alias": "segments";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "stateLabels": {
+      "alias": "stateLabels";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

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

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import { QueryList, TemplateRef } from "@angular/core";
-import { ButtonVariant } from "@lifecorner/angular-ui-kit/button";
+import { ButtonSize, ButtonVariant } from "@lifecorner/angular-ui-kit/button";
 /**
  * Directive for defining custom cell templates in the Table component.
  *
@@ -12,6 +12,9 @@ import { ButtonVariant } from "@lifecorner/angular-ui-kit/button";
  *   </ng-template>
  * </lc-table>
  * ```
+ *
+ * In the `footerRow` (3.36) the same template renders with `footer: true` in
+ * its context (`let-footer="footer"`), e.g. to leave out a badge in the sum.
  */
 export declare class TableCellDirective {
   /** The column key this template applies to */
@@ -81,8 +84,25 @@ export interface TableAction {
   icon?: string;
   /** Button variant (default: 'ghost') */
   variant?: ButtonVariant;
+  /**
+   * Size of the action's `lc-button` (3.37, services row 3). `'lg'` is
+   * 48.5 px high with a label and 45.6 px icon-only, for touch rows; the icon
+   * stays 20 px. Pass another size per breakpoint yourself.
+   *
+   * @default 'xs'
+   */
+  size?: ButtonSize;
   /** Optional tooltip / aria-label, useful for icon-only actions */
   tooltip?: string;
+  /**
+   * Accessible name of the action's button (3.36, services row 2): a string,
+   * or a function of the row, so each row's button names its object
+   * (`(row) => 'Herkunft von ' + row.name` → „Herkunft von Demo Netz“) while
+   * the visible label, icon and look stay the same. Wins over `tooltip`,
+   * `label` and `key`; an empty result falls back to them. Keep the visible
+   * label in it (WCAG 2.5.3).
+   */
+  ariaLabel?: string | ((row: Record<string, unknown>, rowIndex: number) => string);
   /** Hide this action for specific rows */
   hidden?: (row: Record<string, unknown>, rowIndex: number) => boolean;
   /** Disable this action for specific rows */
@@ -184,6 +204,8 @@ interface DisplayRow {
  * - `caption` as the table's `<caption>`, visible or for screen readers only
  *   (`showCaption`, 3.16)
  * - Empty state text for no data
+ * - `footerRow` (3.36): a sum row in `<tfoot>`, outside sorting, filtering,
+ *   paging and the tree; `TableAction.ariaLabel` names each row's action
  * - Accessible with proper table semantics
  *
  * @example
@@ -297,6 +319,19 @@ export declare class TableComponent {
   actionsWidth: import("@angular/core").InputSignal<string | undefined>;
   /** Horizontal alignment of the action buttons (and header label) within the cell */
   actionsAlign: import("@angular/core").InputSignal<TableActionsAlign>;
+  /**
+   * One footer row below all data rows (3.36, services row 1), e.g. a sum:
+   * a record of the data's shape, rendered as a `<tfoot>` row with the
+   * table's columns, `lcTableCell` templates (their context has
+   * `footer: true`), `cellClass`, `cellStyle` and `formatter` (`rowIndex`
+   * −1). It is never sorted, filtered, searched, paged, selected or counted,
+   * stays last in every tree state, and its first cell is the row header
+   * (`<th scope="row">`). A 1 px rule above and a 3 px double rule below
+   * (`--color-field-border`) separate it; its cells are semibold with tabular
+   * figures. The table scrolls on small screens, and the footer with it.
+   * @default undefined
+   */
+  footerRow: import("@angular/core").InputSignal<Record<string, unknown> | undefined>;
   /**
    * Row field holding the unique id. Required (together with {@link parentKey})
    * to enable hierarchical "tree mode". Absent ⇒ today's flat table.
@@ -458,6 +493,11 @@ export declare class TableComponent {
   protected readonly hasActions: import("@angular/core").Signal<boolean>;
   protected isActionHidden(action: TableAction, row: Record<string, unknown>, rowIndex: number): boolean;
   protected isActionDisabled(action: TableAction, row: Record<string, unknown>, rowIndex: number): boolean;
+  /**
+   * Accessible name of an action button (3.36): `ariaLabel` (a string or the
+   * row's result) over `tooltip`, `label` and `key`; without it, as before.
+   */
+  protected actionAriaLabel(action: TableAction, row: Record<string, unknown>, rowIndex: number): string;
   /**
    * Handles an action button click. The DOM click is stopped from propagating
    * (see template `$event.stopPropagation()`), so the row's `rowClick` never fires.
@@ -659,6 +699,11 @@ export declare class TableComponent {
       "required": false;
       "isSignal": true;
     };
+    "footerRow": {
+      "alias": "footerRow";
+      "required": false;
+      "isSignal": true;
+    };
     "idKey": {
       "alias": "idKey";
       "required": false;

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

@@ -54,6 +54,7 @@ export * from "@lifecorner/angular-ui-kit/app-shell";
 export * from "@lifecorner/angular-ui-kit/avatar";
 export * from "@lifecorner/angular-ui-kit/badge";
 export * from "@lifecorner/angular-ui-kit/status-dot";
+export * from "@lifecorner/angular-ui-kit/state-strip";
 export * from "@lifecorner/angular-ui-kit/toggle-group";
 export * from "@lifecorner/angular-ui-kit/list";
 export * from "@lifecorner/angular-ui-kit/chip";