@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1,120 @@
+import * as i0 from "@angular/core";
+/**
+ * Toolbar — a horizontal strip of controls with built-in density-aware spacing.
+ *
+ * Use for action bars above tables, on top of cards, inside drawers, or
+ * anywhere a row of buttons / filters / titles needs consistent rhythm.
+ *
+ * The toolbar exposes three slots:
+ *  - `[slot="start"]` — leading content (icon, title, primary filter)
+ *  - default          — middle content (grows to fill remaining space)
+ *  - `[slot="end"]`   — trailing actions (right-aligned)
+ *
+ * If only `[slot="start"]` and `[slot="end"]` are provided, the middle
+ * automatically becomes a flexible spacer so actions push to the right.
+ *
+ * Padding, gap and divider styles are driven by `--lc-density-padding-*`
+ * and `--lc-density-gap-*` tokens, so wrapping a `data-density` ancestor
+ * automatically rescales the toolbar — no template changes needed.
+ *
+ * Keyboard: the host carries `role="toolbar"`, and Left/Right (plus Home/End)
+ * move focus between the toolbar's focusable controls, as the role promises.
+ * Arrows are left alone inside text fields, selects and nested composite
+ * widgets (tablist, listbox, menu, …) that own them. Tab still reaches every
+ * control — the projected content is arbitrary, so the toolbar deliberately
+ * does not rewrite child `tabindex`es (roving tabindex).
+ *
+ * Naming note: `density` here is the toolbar's *local* rhythm override
+ * (compact / cosy / comfortable — the same vocabulary as the page-level
+ * `data-density` attribute), whereas `lc-page-header` calls its scale `size`.
+ * Left as-is for API stability.
+ *
+ * @example
+ * ```html
+ * <lc-toolbar>
+ *   <h2 slot="start">Reports</h2>
+ *   <lc-button slot="end" variant="secondary">Export</lc-button>
+ *   <lc-button slot="end" variant="primary">New report</lc-button>
+ * </lc-toolbar>
+ * ```
+ */
+export declare class ToolbarComponent {
+  private readonly host;
+  /**
+   * Visual density of the toolbar itself.
+   * - `comfortable` — generous padding/gap (default for dashboards)
+   * - `cosy`        — balanced padding/gap (default in chrome)
+   * - `compact`     — tight, data-dense (tables, side panels)
+   */
+  readonly density: import("@angular/core").InputSignal<"compact" | "cosy" | "comfortable">;
+  /**
+   * Background variant.
+   * - `transparent` — inherits parent background (default)
+   * - `surface`     — subtle surface color (use when stacking on page bg)
+   * - `muted`       — slightly stronger fill (use as a toolbar on a card)
+   */
+  readonly background: import("@angular/core").InputSignal<"transparent" | "surface" | "muted">;
+  /**
+   * Border placement.
+   * - `none`   — no border (default)
+   * - `bottom` — divider below the toolbar
+   * - `top`    — divider above the toolbar
+   * - `around` — full border
+   */
+  readonly border: import("@angular/core").InputSignal<"none" | "bottom" | "top" | "around">;
+  /**
+   * Allow toolbar content to wrap onto multiple lines on small viewports.
+   * @default true
+   */
+  readonly wrap: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Vertical alignment of toolbar children.
+   * @default 'center'
+   */
+  readonly align: import("@angular/core").InputSignal<"start" | "center" | "end" | "stretch" | "baseline">;
+  /**
+   * Sticky behavior — pins the toolbar to the top of its scroll container.
+   * @default false
+   */
+  readonly sticky: import("@angular/core").InputSignal<boolean>;
+  protected readonly hostClasses: import("@angular/core").Signal<string>;
+  /**
+   * Arrow-key navigation between the toolbar's focusable controls
+   * (WAI-ARIA toolbar pattern): Left/Right move by one, Home/End jump.
+   */
+  protected onKeydown(event: KeyboardEvent): void;
+  private focusableControls;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "lc-toolbar", never, {
+    "density": {
+      "alias": "density";
+      "required": false;
+      "isSignal": true;
+    };
+    "background": {
+      "alias": "background";
+      "required": false;
+      "isSignal": true;
+    };
+    "border": {
+      "alias": "border";
+      "required": false;
+      "isSignal": true;
+    };
+    "wrap": {
+      "alias": "wrap";
+      "required": false;
+      "isSignal": true;
+    };
+    "align": {
+      "alias": "align";
+      "required": false;
+      "isSignal": true;
+    };
+    "sticky": {
+      "alias": "sticky";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["[slot='start']", "*", "[slot='end']"], true, never>;
+}

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

@@ -0,0 +1,120 @@
+import * as i0 from "@angular/core";
+import { OnDestroy } from "@angular/core";
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Internal tooltip content component
+ */
+export declare class TooltipContentComponent {
+  content: string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TooltipContentComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<TooltipContentComponent, "lc-tooltip-content", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Tooltip directive for displaying contextual information.
+ * Uses Angular CDK Overlay for positioning; flips to the opposite side when
+ * the preferred one does not fit the viewport, and can be dismissed with
+ * Escape (WCAG 1.4.13).
+ *
+ * @example
+ * ```html
+ * <button lcTooltip="Click me!" tooltipPosition="top">
+ *   Hover or focus
+ * </button>
+ * ```
+ */
+export declare class TooltipDirective implements OnDestroy {
+  private static nextId;
+  /**
+   * Tooltip content text
+   */
+  lcTooltip: import("@angular/core").InputSignal<string>;
+  /**
+   * Tooltip position
+   * @default 'top'
+   */
+  tooltipPosition: import("@angular/core").InputSignal<TooltipPosition>;
+  /**
+   * Show delay in milliseconds
+   * @default 0
+   */
+  tooltipShowDelay: import("@angular/core").InputSignal<number>;
+  /**
+   * Hide delay in milliseconds
+   * @default 0
+   */
+  tooltipHideDelay: import("@angular/core").InputSignal<number>;
+  /**
+   * Whether tooltip is disabled
+   * @default false
+   */
+  tooltipDisabled: import("@angular/core").InputSignal<boolean>;
+  /** Id of the tooltip element; the host's `aria-describedby` points at it while shown. */
+  readonly tooltipId: string;
+  private overlayRef?;
+  private tooltipRef?;
+  private positionSubscription?;
+  private showTimeout?;
+  private hideTimeout?;
+  private escapeListener?;
+  private readonly elementRef;
+  private readonly overlay;
+  private readonly viewContainerRef;
+  private readonly renderer;
+  private readonly overlayStack;
+  ngOnDestroy(): void;
+  onMouseEnter(): void;
+  onMouseLeave(): void;
+  onFocus(): void;
+  onBlur(): void;
+  /**
+   * Show tooltip programmatically
+   */
+  show(): void;
+  /**
+   * Hide tooltip programmatically
+   */
+  hide(): void;
+  /**
+   * Toggle tooltip visibility
+   */
+  toggle(): void;
+  private showWithDelay;
+  private hideWithDelay;
+  private createOverlay;
+  /** Preferred position first, then the fallbacks the overlay may flip to. */
+  private getPositions;
+  private setPositionClass;
+  /** Append the tooltip id to the host's aria-describedby without clobbering ids the caller set. */
+  private addDescribedBy;
+  private removeDescribedBy;
+  private clearTimeouts;
+  private cleanup;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[lcTooltip]", never, {
+    "lcTooltip": {
+      "alias": "lcTooltip";
+      "required": true;
+      "isSignal": true;
+    };
+    "tooltipPosition": {
+      "alias": "tooltipPosition";
+      "required": false;
+      "isSignal": true;
+    };
+    "tooltipShowDelay": {
+      "alias": "tooltipShowDelay";
+      "required": false;
+      "isSignal": true;
+    };
+    "tooltipHideDelay": {
+      "alias": "tooltipHideDelay";
+      "required": false;
+      "isSignal": true;
+    };
+    "tooltipDisabled": {
+      "alias": "tooltipDisabled";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,231 @@
+import * as i0 from "@angular/core";
+/**
+ * Node type. `'file'` and `'folder'` get the built-in file-tree treatment
+ * (extension icons, folder open/close icons). Any other string marks a custom
+ * domain type: such nodes render a colored type dot (or an explicit `icon`)
+ * instead of file icons.
+ */
+export type TreeNodeType = 'file' | 'folder' | (string & {});
+export type TreeNodeStatus = 'default' | 'added' | 'modified' | 'removed' | 'muted' | 'success' | 'busy';
+/**
+ * A node in the tree. Any node carrying `children` can expand — this covers
+ * file trees (folders) as well as arbitrary domain hierarchies.
+ */
+export interface TreeNode {
+  /** Display name, e.g. `app.component.ts` or `src`. */
+  name: string;
+  /**
+   * Node type. Optional — inferred as `folder` when `children` is present,
+   * otherwise `file`. May be any string for domain hierarchies.
+   */
+  type?: TreeNodeType;
+  /**
+   * Stable identifier. Optional — when omitted, the full path is used,
+   * which is stable as long as names are unique among siblings.
+   */
+  id?: string;
+  /** Child nodes. Any node with children can expand / collapse. */
+  children?: TreeNode[];
+  /**
+   * Explicit Tabler icon name. Overrides automatic file-type / folder
+   * icon resolution and the custom-type dot.
+   */
+  icon?: string;
+  /**
+   * Accent color for the node's icon / type dot. Any CSS color, including
+   * `var(--…)` token references.
+   */
+  color?: string;
+  /** Optional badge text shown to the right of the node (e.g. git status, count). */
+  badge?: string;
+  /**
+   * Tone of the badge / node accent. `success` additionally renders a ✓
+   * indicator, `busy` a pulsing dot (static under `prefers-reduced-motion`).
+   */
+  status?: TreeNodeStatus;
+  /** Whether this node starts expanded. Ignored for nodes without children. */
+  expanded?: boolean;
+  /** Disable selection / interaction for this node. */
+  disabled?: boolean;
+}
+interface FlatNode {
+  id: string;
+  name: string;
+  type: TreeNodeType;
+  depth: number;
+  hasChildren: boolean;
+  expanded: boolean;
+  /** Resolved icon, or `null` for custom-type nodes that render a type dot. */
+  icon: string | null;
+  color?: string;
+  badge?: string;
+  status: TreeNodeStatus;
+  disabled: boolean;
+  /** Whether each ancestor level still has following siblings (for guide lines). */
+  ancestorHasSibling: boolean[];
+  /** Whether this node is the last among its siblings. */
+  isLast: boolean;
+  /** 1-based position among its siblings (aria-posinset). */
+  posInSet: number;
+  /** Number of siblings including itself (aria-setsize). */
+  setSize: number;
+  /** Id of the parent node, `null` for root nodes. */
+  parentId: string | null;
+}
+/**
+ * Tree view component for visualizing hierarchies — file / folder trees as
+ * well as arbitrary domain object trees with custom node types.
+ *
+ * Features:
+ * - Recursive rendering from a single `nodes` input; any node with children
+ *   can expand / collapse
+ * - Automatic file-type icons by extension and well-known file name,
+ *   with open / closed folder icons (for `file` / `folder` nodes)
+ * - Custom node types: colored type dots or explicit icons via `type`,
+ *   `color`, `icon`
+ * - Expand / collapse, with expand-all / collapse-all helpers
+ * - Two-way bound selection and a `nodeClick` event
+ * - Indentation guide lines for readability
+ * - Optional per-node status badges (added / modified / removed) and status
+ *   indicators (`success` ✓, `busy` pulse)
+ * - Keyboard accessible: roving tabindex (one tab stop), Arrow keys / Home /
+ *   End move focus, Enter / Space toggle or select, Left / Right collapse /
+ *   expand or move to parent / first child
+ * - Dark / light theme support via design tokens
+ *
+ * @example
+ * ```html
+ * <lc-tree-view [nodes]="projectTree" [(selectedId)]="selected" />
+ * ```
+ */
+export declare class TreeViewComponent {
+  /** The root-level nodes of the tree. */
+  readonly nodes: import("@angular/core").InputSignal<TreeNode[]>;
+  /** Id (or path) of the currently selected node (two-way bindable). */
+  readonly selectedId: import("@angular/core").ModelSignal<string | null>;
+  /** Show indentation guide lines. */
+  readonly showGuides: import("@angular/core").InputSignal<boolean>;
+  /** Show the expand-all / collapse-all toolbar. */
+  readonly showToolbar: import("@angular/core").InputSignal<boolean>;
+  /** Label of the toolbar's expand-all button. */
+  readonly expandAllLabel: import("@angular/core").InputSignal<string>;
+  /** Label of the toolbar's collapse-all button. */
+  readonly collapseAllLabel: import("@angular/core").InputSignal<string>;
+  /** Icon size for node icons. */
+  readonly iconSize: import("@angular/core").InputSignal<"md" | "xs" | "sm">;
+  /** Accessible name of a folder's expand toggle. */
+  readonly expandAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of a folder's collapse toggle. */
+  readonly collapseAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Emitted when a node is clicked / activated. */
+  readonly nodeClick: import("@angular/core").OutputEmitterRef<TreeNode>;
+  private readonly host;
+  /** Set of node ids the user has explicitly expanded / collapsed. */
+  private readonly expandOverrides;
+  /** Id of the node that last had keyboard focus (roving tabindex). */
+  private readonly focusedId;
+  /** Flattened, render-ready list of visible nodes. */
+  protected readonly visibleNodes: import("@angular/core").Signal<FlatNode[]>;
+  /**
+   * The single tab stop of the tree: the last focused node if it is still
+   * visible, else the selected node, else the first enabled node.
+   */
+  protected readonly tabStopId: import("@angular/core").Signal<string | null>;
+  protected badgeColor(status: TreeNodeStatus): string;
+  protected onNodeClick(flat: FlatNode): void;
+  protected onToggleClick(flat: FlatNode, event: Event): void;
+  protected onFocus(flat: FlatNode): void;
+  protected onKeydown(flat: FlatNode, event: KeyboardEvent): void;
+  /** Expand every folder in the tree. */
+  expandAll(): void;
+  /** Collapse every folder in the tree. */
+  collapseAll(): void;
+  protected trackById: (_: number, n: FlatNode) => string;
+  /** Index of the next enabled node from `from` in direction `dir`, or -1. */
+  private nextEnabled;
+  /**
+   * Moves keyboard focus to the visible node at `index`. The rows are
+   * rendered in `visibleNodes()` order, so the index maps 1:1 to the DOM.
+   */
+  private focusIndex;
+  private toggle;
+  private setExpanded;
+  private setAll;
+  private isExpanded;
+  private flatten;
+  private resolveIcon;
+  private findNode;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TreeViewComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<TreeViewComponent, "lc-tree-view", never, {
+    "nodes": {
+      "alias": "nodes";
+      "required": true;
+      "isSignal": true;
+    };
+    "selectedId": {
+      "alias": "selectedId";
+      "required": false;
+      "isSignal": true;
+    };
+    "showGuides": {
+      "alias": "showGuides";
+      "required": false;
+      "isSignal": true;
+    };
+    "showToolbar": {
+      "alias": "showToolbar";
+      "required": false;
+      "isSignal": true;
+    };
+    "expandAllLabel": {
+      "alias": "expandAllLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "collapseAllLabel": {
+      "alias": "collapseAllLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconSize": {
+      "alias": "iconSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "expandAriaLabel": {
+      "alias": "expandAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "collapseAriaLabel": {
+      "alias": "collapseAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selectedId": "selectedIdChange";
+    "nodeClick": "nodeClick";
+  }, never, never, true, never>;
+}
+/**
+ * File-type → icon mapping for the TreeView component.
+ *
+ * Icon names refer to Tabler Icons (the design system's icon source).
+ * Resolution order for a file node:
+ *   1. explicit `node.icon`
+ *   2. exact file name match (e.g. `package.json`, `Dockerfile`)
+ *   3. file extension match (e.g. `.ts`, `.png`)
+ *   4. generic file fallback
+ */
+/** Icon used for collapsed folders. */
+export declare const FOLDER_ICON = "folder";
+/** Icon used for expanded (open) folders. */
+export declare const FOLDER_OPEN_ICON = "folder-open";
+/** Generic fallback icon for files with no specific match. */
+export declare const FILE_FALLBACK_ICON = "file";
+/**
+ * Resolve the icon name for a file based on its name.
+ * Performs exact-name then extension lookup, falling back to a generic file icon.
+ */
+export declare function resolveFileIcon(fileName: string): string;
+export {};

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

@@ -0,0 +1,126 @@
+import * as i0 from "@angular/core";
+/**
+ * Typography component for consistent text styling.
+ *
+ * Features:
+ * - Semantic variants (h1–h6, body1, body2, caption, overline)
+ * - Automatic HTML element mapping per variant
+ * - Text alignment options (left, center, right, justify)
+ * - Color variants (primary, secondary, success, warning, error, info)
+ * - Font weight overrides (regular, medium, semibold, bold)
+ * - Text transform (uppercase, lowercase, capitalize)
+ * - Line clamping for text truncation
+ * - Gutter bottom margin option
+ *
+ * @example
+ * ```html
+ * <lc-typography variant="h1" color="primary">Heading</lc-typography>
+ * <lc-typography variant="body1" [lineClamp]="2">Truncated text...</lc-typography>
+ * ```
+ */
+export declare class TypographyComponent {
+  /**
+   * Typography variant determining the HTML element and default styles
+   * - h1-h6: Heading elements with corresponding sizes
+   * - body1: Default paragraph text (16px)
+   * - body2: Smaller body text (14px)
+   * - subtitle1: Larger subtitle (18px)
+   * - subtitle2: Smaller subtitle (14px)
+   * - caption: Small helper text (12px)
+   * - overline: Uppercase accent text (10px)
+   * @default 'body1'
+   */
+  variant: import("@angular/core").InputSignal<"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "subtitle1" | "subtitle2" | "caption" | "overline">;
+  /**
+   * Text alignment
+   * @default 'left'
+   */
+  align: import("@angular/core").InputSignal<"left" | "center" | "right" | "justify">;
+  /**
+   * Text color using semantic color tokens
+   * @default 'primary'
+   */
+  color: import("@angular/core").InputSignal<"primary" | "secondary" | "disabled" | "error" | "success" | "warning" | "info">;
+  /**
+   * Font weight override. When unset, the variant's own weight applies
+   * (e.g. h1 is bold, body1 is regular); setting it wins over the variant.
+   * @default undefined
+   */
+  weight: import("@angular/core").InputSignal<"regular" | "medium" | "semibold" | "bold" | undefined>;
+  /**
+   * Text transform
+   * @default 'none'
+   */
+  transform: import("@angular/core").InputSignal<"none" | "uppercase" | "lowercase" | "capitalize">;
+  /**
+   * Prevent text wrapping (applies ellipsis on overflow)
+   * @default false
+   */
+  noWrap: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Limit text to a specific number of lines (1-6)
+   * Uses CSS line-clamp for multi-line truncation
+   * @default undefined
+   */
+  lineClamp: import("@angular/core").InputSignal<number | undefined>;
+  /**
+   * Add bottom margin (1rem) for spacing between elements
+   * @default false
+   */
+  gutterBottom: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Compute the HTML element tag based on variant
+   */
+  readonly elementTag: import("@angular/core").Signal<string>;
+  /**
+   * Compute all CSS classes based on inputs.
+   *
+   * Modifier classes are prefixed (`lc-typography--…`): the component renders
+   * with `ViewEncapsulation.None`, so unprefixed names such as `.uppercase` or
+   * `.mb-4` would become app-global rules that shadow Tailwind utilities.
+   */
+  readonly typographyClasses: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TypographyComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<TypographyComponent, "lc-typography", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "align": {
+      "alias": "align";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "weight": {
+      "alias": "weight";
+      "required": false;
+      "isSignal": true;
+    };
+    "transform": {
+      "alias": "transform";
+      "required": false;
+      "isSignal": true;
+    };
+    "noWrap": {
+      "alias": "noWrap";
+      "required": false;
+      "isSignal": true;
+    };
+    "lineClamp": {
+      "alias": "lineClamp";
+      "required": false;
+      "isSignal": true;
+    };
+    "gutterBottom": {
+      "alias": "gutterBottom";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}