@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1,346 @@
+import { ControlValueAccessor } from "@angular/forms";
+import * as i0 from "@angular/core";
+/** Values of the native `autocapitalize` attribute. */
+export type InputAutocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+/** Values of the native `enterkeyhint` attribute (label of the on-screen keyboard's Enter key). */
+export type InputEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+/**
+ * Input component for single-line text form data entry.
+ *
+ * Features:
+ * - Type variants (text, email, password, number, tel, url)
+ * - Size presets (xs, sm, md, lg)
+ * - Leading and trailing icon support
+ * - Character count display with maxLength (announced only near the limit)
+ * - Validation error message display
+ * - Helper text support
+ * - Disabled and readonly states (read-only values can wrap: `readonlyWrap`)
+ * - Input purpose and keyboard hints: `autocomplete`, `name`, `autocapitalize`,
+ *   `spellcheck`, `enterkeyhint`
+ * - ControlValueAccessor integration for reactive forms
+ *
+ * @example
+ * ```html
+ * <lc-input label="Name" autocomplete="name" autocapitalize="words" [spellcheck]="false" [(ngModel)]="name" />
+ * ```
+ */
+export declare class InputComponent implements ControlValueAccessor {
+  /**
+   * Input label (displayed above input)
+   */
+  readonly label: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Placeholder text
+   * @default ''
+   */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /**
+   * Input type
+   * @default 'text'
+   */
+  readonly type: import("@angular/core").InputSignal<"number" | "text" | "email" | "password" | "tel" | "url">;
+  /**
+   * Size of the input
+   * @default 'md'
+   */
+  readonly size: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg">;
+  /**
+   * Whether the input is disabled
+   * @default false
+   */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the input is read-only
+   * @default false
+   */
+  readonly readonly: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Read-only values wrap onto more lines instead of being clipped (WCAG 1.4.10):
+   * the value is shown as text (a read-only textbox named by the label), and a
+   * hidden native input keeps the value, `name` and `autocomplete` for forms and
+   * password managers. Only applies while `readonly` is set.
+   * @default false
+   */
+  readonly readonlyWrap: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the input is required
+   * @default false
+   */
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Show the `*` after the label of a `required` field. `false` keeps the
+   * required semantics (`required`, `aria-required`) without the asterisk —
+   * for forms where every field is required.
+   * @default true
+   */
+  readonly requiredIndicator: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Error message to display (if validation fails)
+   */
+  readonly error: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Helper text to display below input
+   */
+  readonly helperText: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Icon to display before input text (Tabler icon name)
+   * @example 'envelope'
+   */
+  readonly iconBefore: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Icon to display after input text (Tabler icon name)
+   * @example 'eye'
+   */
+  readonly iconAfter: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Maximum number of characters
+   */
+  readonly maxLength: import("@angular/core").InputSignal<number | undefined>;
+  /**
+   * Whether to show character count
+   * @default false
+   */
+  readonly showCharCount: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Screen-reader announcement of the character count near the limit;
+   * `{remaining}` is replaced.
+   * @default 'Characters remaining: {remaining}'
+   */
+  readonly charCountRemainingLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Remaining characters from which the count is announced (the visible count
+   * is always shown). Unset = the last 10 % of `maxLength` (at least 1).
+   */
+  readonly charCountAnnounceThreshold: import("@angular/core").InputSignal<number | undefined>;
+  /**
+   * ARIA label for accessibility
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Native `autocomplete` — the input purpose (WCAG 1.3.5), so browsers and
+   * password managers fill the field: `name`, `email`, `username`,
+   * `username webauthn` (offers passkeys in the field), `current-password`,
+   * `new-password`, `one-time-code`, `tel`, `off` … Unset = no attribute.
+   */
+  readonly autocomplete: import("@angular/core").InputSignal<string | undefined>;
+  /** Native `name` of the inner `<input>` (form posts, password managers). Unset = no attribute. */
+  readonly name: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Native `autocapitalize` for on-screen keyboards: `off` for addresses,
+   * user names and codes, `words` for names. Unset = no attribute.
+   */
+  readonly autocapitalize: import("@angular/core").InputSignal<InputAutocapitalize | undefined>;
+  /** Native `spellcheck`: `false` for names, addresses and codes. Unset = no attribute. */
+  readonly spellcheck: import("@angular/core").InputSignal<boolean | undefined>;
+  /** Native `enterkeyhint`: the label of the on-screen keyboard's Enter key. Unset = no attribute. */
+  readonly enterkeyhint: import("@angular/core").InputSignal<InputEnterKeyHint | undefined>;
+  /** Accessible name of the `*` marker shown for `required` fields. */
+  readonly requiredAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Current value (two-way bindable: `[value]` / `[(value)]`). Emits
+   * `valueChange` whenever it changes — once per user keystroke, on `clear()`
+   * and when a bound form control writes a value.
+   */
+  readonly value: import("@angular/core").ModelSignal<string>;
+  /**
+   * Emitted when input receives focus
+   */
+  readonly focused: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * Emitted when input loses focus
+   */
+  readonly blurred: import("@angular/core").OutputEmitterRef<void>;
+  /**
+   * Emitted when Enter key is pressed
+   */
+  readonly enterPressed: import("@angular/core").OutputEmitterRef<void>;
+  readonly inputId: string;
+  private readonly inputElement;
+  private readonly readonlyValueElement;
+  private readonly _formDisabled;
+  private onChange;
+  private onTouched;
+  /** The read-only value is shown as wrapping text (SI-10). */
+  protected readonly wrapsReadonlyValue: import("@angular/core").Signal<boolean>;
+  /** `aria-describedby`: only the texts that are rendered (the error replaces the helper text). */
+  protected readonly describedBy: import("@angular/core").Signal<string | null>;
+  /** Screen-reader text of the character count: empty until the limit is near. */
+  protected readonly charCountAnnouncement: import("@angular/core").Signal<string>;
+  /**
+   * Computed disabled state from both input and form control
+   */
+  protected get isDisabled(): boolean;
+  /**
+   * Gets current character count
+   */
+  protected get charCount(): number;
+  /**
+   * Determines if error state should be shown
+   */
+  protected get hasError(): boolean;
+  /**
+   * Programmatically focus the input (the visible value while `readonlyWrap` applies)
+   */
+  focus(): void;
+  /**
+   * Programmatically select input text
+   */
+  select(): void;
+  /**
+   * Clear the input value
+   */
+  clear(): void;
+  writeValue(value: string | null): void;
+  registerOnChange(fn: (value: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(isDisabled: boolean): void;
+  /**
+   * Handles input value changes
+   */
+  protected onInput(event: Event): void;
+  /**
+   * Handles input focus
+   */
+  protected onFocus(): void;
+  /**
+   * Handles input blur
+   */
+  protected onBlur(): void;
+  /**
+   * Handles keydown events
+   */
+  protected onKeydown(event: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "lc-input", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonlyWrap": {
+      "alias": "readonlyWrap";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "requiredIndicator": {
+      "alias": "requiredIndicator";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "helperText": {
+      "alias": "helperText";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconBefore": {
+      "alias": "iconBefore";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconAfter": {
+      "alias": "iconAfter";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxLength": {
+      "alias": "maxLength";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCharCount": {
+      "alias": "showCharCount";
+      "required": false;
+      "isSignal": true;
+    };
+    "charCountRemainingLabel": {
+      "alias": "charCountRemainingLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "charCountAnnounceThreshold": {
+      "alias": "charCountAnnounceThreshold";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "autocomplete": {
+      "alias": "autocomplete";
+      "required": false;
+      "isSignal": true;
+    };
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "autocapitalize": {
+      "alias": "autocapitalize";
+      "required": false;
+      "isSignal": true;
+    };
+    "spellcheck": {
+      "alias": "spellcheck";
+      "required": false;
+      "isSignal": true;
+    };
+    "enterkeyhint": {
+      "alias": "enterkeyhint";
+      "required": false;
+      "isSignal": true;
+    };
+    "requiredAriaLabel": {
+      "alias": "requiredAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "focused": "focused";
+    "blurred": "blurred";
+    "enterPressed": "enterPressed";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,86 @@
+/**
+ * Colour helpers for text drawn on top of chart fills.
+ */
+/** Parses `#rgb`, `#rrggbb`, `rgb()` and `rgba()`. Anything else → null. */
+export declare function parseRgb(color: string): [number, number, number] | null;
+/**
+ * Ink that stays readable on `fill`, or `null` when that cannot be decided.
+ *
+ * A literal colour (`#…`, `rgb()`) is measured by its relative luminance and
+ * gets a dark or light ink. A `var(--…)` token can't be resolved without the
+ * DOM — and its resolution flips with the theme — so `null` is returned and
+ * the caller should draw the label in `--color-text-primary` with a
+ * `--color-surface` halo (`paint-order: stroke`), which reads on any fill in
+ * both themes.
+ */
+export declare function readableInk(fill: string): string | null;
+/**
+ * Default categorical palette for the chart family.
+ *
+ * Every entry is a theme token whose light *and* dark resolutions sit clearly
+ * against `--color-surface`: the 500 brand shades and the status defaults flip
+ * to their pastel tints in the dark theme, the 700 shades to their light tints,
+ * so consecutive hues stay distinguishable on both themes. (The 300 shades and
+ * `-light` status tints some charts used before resolve to dark, low-contrast
+ * colours on the dark theme, which is why they are not in this list.)
+ *
+ * Charts fall back to this list when a series/segment brings no `color` of its
+ * own; per-item colours always win.
+ */
+export declare const CHART_PALETTE: readonly string[];
+/** Palette colour for the series/segment at `index`, wrapping around. */
+export declare function chartColor(index: number): string;
+/**
+ * SVG path builders shared by the line-shaped charts (line, area, sparkline).
+ */
+export interface ChartPoint {
+  x: number;
+  y: number;
+}
+/** `M x,y L x,y …` polyline through the points; '' for fewer than two points. */
+export declare function linearPath(points: readonly ChartPoint[]): string;
+/**
+ * Smooth cubic path through the points (Catmull-Rom → Bézier approximation);
+ * '' for fewer than two points.
+ */
+export declare function smoothPath(points: readonly ChartPoint[]): string;
+/**
+ * Numeric helpers shared by the chart family: a "nice" linear scale for axes
+ * and grids, float-safe value formatting, and a NaN guard for caller data.
+ *
+ * Every chart used to place its grid on its own ad-hoc rounding
+ * (`Math.ceil(max / 4)`, `Math.round(v * 10) / 10`, `toFixed`), which let the
+ * top tick disagree with the value at the plot edge and leaked binary float
+ * noise (`0.30000000000000004`) into tick labels. This module is the one
+ * routine they all go through instead.
+ */
+/** Signature of a chart's `formatValue` input. */
+export type ChartValueFormatter = (value: number) => string;
+/** `value` if it is a finite number, otherwise `fallback` (NaN, ±Infinity, undefined, null…). */
+export declare function toFinite(value: unknown, fallback?: number): number;
+/** Strips binary float noise (0.1 + 0.2 → 0.3) and normalises -0 to 0. */
+export declare function cleanNumber(value: number): number;
+/** Default tick/value formatter: float-clean `String(value)`, no locale, no unit. */
+export declare function formatChartValue(value: number): string;
+export interface NiceScale {
+  /** Lower bound — a multiple of `step`, ≤ the requested min. */
+  min: number;
+  /** Upper bound — a multiple of `step`, ≥ the requested max. */
+  max: number;
+  /** Tick interval: 1, 2, 2.5 or 5 × 10ⁿ. */
+  step: number;
+  /** All tick values from `min` to `max` inclusive. */
+  ticks: number[];
+}
+/** Rounds a raw interval up to the nearest 1, 2, 2.5 or 5 × 10ⁿ. */
+export declare function niceStep(raw: number): number;
+/**
+ * Linear scale whose bounds are multiples of a nice step, so every tick label
+ * is a round number and the outermost ticks equal the values at the plot
+ * edges. Bounds are only ever extended outward, never shrunk. A degenerate
+ * range (`min === max`) is widened towards zero, or to [0, 1] when both are 0.
+ *
+ * `intervals` is the *target* number of steps; the result may have one more
+ * or fewer because the bounds snap to the step.
+ */
+export declare function niceScale(min: number, max: number, intervals?: number): NiceScale;

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

@@ -0,0 +1,31 @@
+import * as i0 from "@angular/core";
+/**
+ * Keeps the open overlays (modal, drawer, popover, menu, tooltip, …) in
+ * opening order so that a dismiss gesture — Escape, click outside — reaches
+ * only the top-most one instead of closing every open layer at once.
+ *
+ * Every overlay pushes its id when it opens and removes it when it closes or
+ * is destroyed. Internal to the library; not part of the public API.
+ */
+export declare class OverlayStackService {
+  private readonly stack;
+  /**
+   * Events already consumed by an overlay. All overlays listen on `document`,
+   * where listeners fire in registration order — not z-order — so by the time a
+   * lower overlay's listener runs, the top one may already have closed and left
+   * the stack, making the lower one "top" for the very same event.
+   */
+  private readonly claimed;
+  /** Register `id` as the new top-most overlay (re-pushing moves it to the top). */
+  push(id: string): void;
+  remove(id: string): void;
+  isTop(id: string): boolean;
+  /**
+   * Whether overlay `id` may act on this dismiss event. True only for the
+   * top-most overlay and only once per event; the caller then closes and, for
+   * keyboard events, stops propagation so nothing outside the stack sees it.
+   */
+  claim(id: string, event: Event): boolean;
+  static ɵfac: i0.ɵɵFactoryDeclaration<OverlayStackService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}

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

@@ -0,0 +1,22 @@
+/**
+ * URL scheme checks shared by the components that put caller- or user-supplied
+ * URLs into `href`, `src`, iframe or download attributes.
+ *
+ * Angular's own sanitizer already refuses `javascript:` in a bound `[href]` or
+ * `[src]`, but a URL that reaches the DOM through `bypassSecurityTrust*`, a
+ * hand-built HTML string or a programmatic `a.click()` never meets it. These
+ * helpers are the check those paths apply instead — allow-lists, not
+ * deny-lists, so an unknown scheme is refused rather than let through.
+ */
+/** The URL's scheme, lower-cased, or null for a relative URL / fragment / query. */
+export declare function urlScheme(url: string): string | null;
+/** For `<a href>`: http(s), mailto, tel, or relative. */
+export declare function isSafeLinkUrl(url: string): boolean;
+/** For `<img src>`: everything a link may be, plus blob: and data: images. */
+export declare function isSafeImageUrl(url: string): boolean;
+/**
+ * For iframes and programmatic downloads: http(s), blob:, data: PDFs, or
+ * relative. Stricter than a link — an iframe navigates a whole browsing
+ * context, and a download link is clicked without the user seeing it.
+ */
+export declare function isSafeResourceUrl(url: string): boolean;

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

@@ -0,0 +1,111 @@
+import * as i0 from "@angular/core";
+export interface KanbanCard {
+  id: string;
+  title: string;
+  description?: string;
+  labels?: KanbanLabel[];
+  assignee?: string;
+  priority?: 'low' | 'medium' | 'high' | 'critical';
+}
+export interface KanbanLabel {
+  text: string;
+  color?: string;
+}
+export interface KanbanColumn {
+  id: string;
+  title: string;
+  cards: KanbanCard[];
+  color?: string;
+  limit?: number;
+}
+export interface KanbanMoveEvent {
+  cardId: string;
+  fromColumnId: string;
+  toColumnId: string;
+  toIndex: number;
+}
+export declare class KanbanBoardComponent {
+  readonly columns: import("@angular/core").InputSignal<KanbanColumn[]>;
+  readonly showCardCount: import("@angular/core").InputSignal<boolean>;
+  readonly showWipLimit: import("@angular/core").InputSignal<boolean>;
+  readonly readonly: import("@angular/core").InputSignal<boolean>;
+  /** Placeholder text of an empty column. */
+  readonly emptyColumnLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name prefix of a card's priority marker, followed by the priority. */
+  readonly priorityAriaLabel: import("@angular/core").InputSignal<string>;
+  readonly cardMoved: import("@angular/core").OutputEmitterRef<KanbanMoveEvent>;
+  readonly cardClick: import("@angular/core").OutputEmitterRef<{
+    card: KanbanCard;
+    columnId: string;
+  }>;
+  private readonly host;
+  private readonly injector;
+  /**
+   * Local working copy of the columns. Re-seeded from the `columns` input
+   * whenever the parent provides a new value, while drops / keyboard moves
+   * update it locally without waiting for the parent to echo the change back.
+   */
+  protected internalColumns: import("@angular/core").WritableSignal<KanbanColumn[]>;
+  protected draggedCard: import("@angular/core").WritableSignal<{
+    card: KanbanCard;
+    columnId: string;
+  } | null>;
+  protected dropTargetColumn: import("@angular/core").WritableSignal<string | null>;
+  protected dropTargetIndex: import("@angular/core").WritableSignal<number>;
+  protected readonly displayColumns: import("@angular/core").Signal<KanbanColumn[]>;
+  protected isOverLimit(col: KanbanColumn): boolean;
+  protected getPriorityIcon(priority?: string): string;
+  protected getPriorityColor(priority?: string): string;
+  protected onDragStart(event: DragEvent, card: KanbanCard, columnId: string): void;
+  protected onDragOver(event: DragEvent, columnId: string, index: number): void;
+  protected onDragOverColumn(event: DragEvent, columnId: string): void;
+  protected onDragLeave(): void;
+  protected onDrop(event: DragEvent, toColumnId: string, toIndex?: number): void;
+  /**
+   * Keyboard alternative to drag & drop: Enter / Space activate the card,
+   * Alt+ArrowLeft / Alt+ArrowRight move it to the neighbouring column,
+   * Alt+ArrowUp / Alt+ArrowDown reorder it within its column. Moves are
+   * suppressed in readonly mode, exactly like drag & drop.
+   */
+  protected onCardKeydown(event: KeyboardEvent, card: KanbanCard, columnId: string): void;
+  /** Moves a card between / within columns and emits `cardMoved`. */
+  private moveCard;
+  protected onDragEnd(): void;
+  protected onCardClick(card: KanbanCard, columnId: string): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<KanbanBoardComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<KanbanBoardComponent, "lc-kanban-board", never, {
+    "columns": {
+      "alias": "columns";
+      "required": true;
+      "isSignal": true;
+    };
+    "showCardCount": {
+      "alias": "showCardCount";
+      "required": false;
+      "isSignal": true;
+    };
+    "showWipLimit": {
+      "alias": "showWipLimit";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyColumnLabel": {
+      "alias": "emptyColumnLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "priorityAriaLabel": {
+      "alias": "priorityAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "cardMoved": "cardMoved";
+    "cardClick": "cardClick";
+  }, never, never, true, never>;
+}