@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1,196 @@
+import * as i0 from "@angular/core";
+import { TemplateRef } from "@angular/core";
+import { BadgeVariant } from "@lifecorner/angular-ui-kit/badge";
+export type TabOrientation = 'horizontal' | 'vertical';
+/**
+ * Individual tab component
+ */
+export declare class TabComponent {
+  /**
+   * Tab label displayed in tab button
+   */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /**
+   * Whether the tab is disabled
+   * @default false
+   */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Optional icon name (Tabler Icons)
+   */
+  readonly icon: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Optional badge content shown after the label (e.g. a count or "New").
+   * `0` is rendered; `undefined`, `null`, and `''` hide the badge.
+   */
+  readonly badge: import("@angular/core").InputSignal<string | number | null | undefined>;
+  /**
+   * Badge color variant
+   * @default 'default'
+   */
+  readonly badgeVariant: import("@angular/core").InputSignal<BadgeVariant>;
+  /**
+   * Whether the badge should be rendered
+   */
+  readonly hasBadge: import("@angular/core").Signal<boolean>;
+  /**
+   * Unique ID for accessibility
+   */
+  readonly id: string;
+  /**
+   * Unique ID for the panel
+   */
+  readonly panelId: string;
+  /**
+   * Template reference for tab content
+   */
+  readonly template: import("@angular/core").Signal<TemplateRef<any>>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "lc-tab", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "badge": {
+      "alias": "badge";
+      "required": false;
+      "isSignal": true;
+    };
+    "badgeVariant": {
+      "alias": "badgeVariant";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
+/**
+ * Tabs component for organizing content into switchable views.
+ *
+ * Features:
+ * - Dynamic tab registration via content projection (tabs added or removed
+ *   after init are picked up automatically)
+ * - Active tab tracking with two-way binding (`[(selectedIndex)]`)
+ * - Accessible with ARIA tablist/tab/tabpanel roles
+ * - Keyboard navigation between tabs (arrow keys, Home, End) moves both the
+ *   selection and DOM focus
+ * - Lazy content rendering per tab
+ * - Optional badge per tab (counts or status labels)
+ *
+ * @example
+ * ```html
+ * <lc-tabs [(selectedIndex)]="active">
+ *   <lc-tab label="Account">Account settings</lc-tab>
+ *   <lc-tab label="Inbox" [badge]="12" badgeVariant="primary">Messages</lc-tab>
+ *   <lc-tab label="Security">Security settings</lc-tab>
+ * </lc-tabs>
+ * ```
+ */
+export declare class TabsComponent {
+  /**
+   * Orientation of tabs
+   * @default 'horizontal'
+   */
+  readonly orientation: import("@angular/core").InputSignal<TabOrientation>;
+  /**
+   * Currently selected tab index. Two-way bindable via `[(selectedIndex)]`;
+   * `selectedIndexChange` emits only when the selection actually changes
+   * (never during initialisation).
+   * @default 0
+   */
+  readonly selectedIndex: import("@angular/core").ModelSignal<number>;
+  /**
+   * Legacy one-way input for the selected index.
+   * @deprecated Bind `[selectedIndex]` / `[(selectedIndex)]` instead.
+   */
+  readonly selectedIndexInput: import("@angular/core").InputSignal<number | undefined>;
+  /**
+   * Projected tab components (signal query — updates when tabs are added or
+   * removed after init).
+   */
+  readonly tabs: import("@angular/core").Signal<readonly TabComponent[]>;
+  /**
+   * Tab list for template access
+   */
+  readonly tabList: import("@angular/core").Signal<readonly TabComponent[]>;
+  /**
+   * Rendered tab buttons — used to move DOM focus on keyboard navigation.
+   */
+  private readonly tabButtons;
+  /**
+   * CSS classes for tab list
+   */
+  readonly tabListClasses: import("@angular/core").Signal<{
+    'lc-tabs__list': boolean;
+    'lc-tabs--horizontal': boolean;
+    'lc-tabs--vertical': boolean;
+  }>;
+  constructor();
+  /**
+   * Select a tab by index
+   */
+  selectTab(index: number): void;
+  /**
+   * Check if tab is selected
+   */
+  isSelected(index: number): boolean;
+  /**
+   * Handle keyboard navigation (automatic activation: focus and selection
+   * move together).
+   */
+  handleKeyDown(event: KeyboardEvent): void;
+  /**
+   * Get tabindex for tab button
+   */
+  getTabIndex(index: number): number;
+  /**
+   * Move DOM focus to the tab button at `index` (roving tabindex).
+   */
+  private focusTab;
+  /**
+   * Get next enabled tab index (with wrapping)
+   */
+  private getNextEnabledTab;
+  /**
+   * Get previous enabled tab index (with wrapping)
+   */
+  private getPreviousEnabledTab;
+  /**
+   * Get first enabled tab index
+   */
+  private getFirstEnabledTab;
+  /**
+   * Get last enabled tab index
+   */
+  private getLastEnabledTab;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "lc-tabs", never, {
+    "orientation": {
+      "alias": "orientation";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectedIndex": {
+      "alias": "selectedIndex";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectedIndexInput": {
+      "alias": "selectedIndexInput";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selectedIndex": "selectedIndexChange";
+  }, ["tabs"], never, true, never>;
+}

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

@@ -0,0 +1,123 @@
+import * as i0 from "@angular/core";
+import { ElementRef } from "@angular/core";
+import { ControlValueAccessor } from "@angular/forms";
+export declare class TagInputComponent implements ControlValueAccessor {
+  private static nextId;
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  readonly maxTags: import("@angular/core").InputSignal<number>;
+  readonly allowDuplicates: import("@angular/core").InputSignal<boolean>;
+  readonly removable: import("@angular/core").InputSignal<boolean>;
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  readonly separator: import("@angular/core").InputSignal<"enter" | "comma" | "both">;
+  readonly suggestions: import("@angular/core").InputSignal<string[]>;
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Placeholder once `maxTags` is reached; `{max}` is replaced by the limit. */
+  readonly maxTagsReachedLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name prefix of a tag's remove button, followed by the tag. */
+  readonly removeTagAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the suggestion list when no `label` is set. */
+  readonly suggestionsAriaLabel: import("@angular/core").InputSignal<string>;
+  readonly tagAdded: import("@angular/core").OutputEmitterRef<string>;
+  readonly tagRemoved: import("@angular/core").OutputEmitterRef<string>;
+  /** Per-instance id wiring the label, the suggestion listbox and its options to the input. */
+  readonly inputId: string;
+  protected readonly listboxId: string;
+  protected tags: import("@angular/core").WritableSignal<string[]>;
+  protected inputValue: import("@angular/core").WritableSignal<string>;
+  protected focused: import("@angular/core").WritableSignal<boolean>;
+  /** Index of the keyboard-highlighted suggestion; -1 = none. */
+  protected activeIndex: import("@angular/core").WritableSignal<number>;
+  /** Set by Escape; hides the list until the text changes again. */
+  private readonly suggestionsDismissed;
+  /** Disabled through the form control (`setDisabledState`), as opposed to the input. */
+  private readonly formDisabled;
+  /** Disabled by either route — the one flag the template consults. */
+  protected readonly isDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly inputEl: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
+  protected readonly filteredSuggestions: import("@angular/core").Signal<string[]>;
+  /** Combobox semantics only make sense when there is a list to open. */
+  protected readonly hasSuggestions: import("@angular/core").Signal<boolean>;
+  protected readonly showSuggestions: import("@angular/core").Signal<boolean>;
+  protected readonly canAdd: import("@angular/core").Signal<boolean>;
+  /**
+   * The input stays mounted when the limit is reached (removing it would drop
+   * focus to `<body>`); it becomes read-only and says why.
+   */
+  protected readonly inputPlaceholder: import("@angular/core").Signal<string>;
+  private onChange;
+  private onTouched;
+  writeValue(value: string[] | null): void;
+  registerOnChange(fn: (val: string[]) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(isDisabled: boolean): void;
+  protected optionId(index: number): string;
+  protected addTag(value: string): void;
+  protected removeTag(index: number): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  protected onInput(event: Event): void;
+  protected onFocus(): void;
+  protected onBlur(): void;
+  protected selectSuggestion(value: string): void;
+  protected focusInput(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TagInputComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<TagInputComponent, "lc-tag-input", never, {
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxTags": {
+      "alias": "maxTags";
+      "required": false;
+      "isSignal": true;
+    };
+    "allowDuplicates": {
+      "alias": "allowDuplicates";
+      "required": false;
+      "isSignal": true;
+    };
+    "removable": {
+      "alias": "removable";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "separator": {
+      "alias": "separator";
+      "required": false;
+      "isSignal": true;
+    };
+    "suggestions": {
+      "alias": "suggestions";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxTagsReachedLabel": {
+      "alias": "maxTagsReachedLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "removeTagAriaLabel": {
+      "alias": "removeTagAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "suggestionsAriaLabel": {
+      "alias": "suggestionsAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "tagAdded": "tagAdded";
+    "tagRemoved": "tagRemoved";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,225 @@
+import { ControlValueAccessor } from "@angular/forms";
+import * as i0 from "@angular/core";
+/**
+ * Textarea component for multi-line text input.
+ *
+ * Features:
+ * - Variant styles (outline, filled)
+ * - Size presets (xs, sm, md, lg)
+ * - Auto-resize with configurable min/max rows
+ * - Character count display with maxLength
+ * - Validation error message and helper text
+ * - Disabled and readonly states
+ * - ControlValueAccessor integration for reactive forms
+ *
+ * @example
+ * ```html
+ * <lc-textarea placeholder="Enter message" [autoResize]="true" [(ngModel)]="message" />
+ * ```
+ */
+export declare class TextareaComponent implements ControlValueAccessor {
+  private readonly textareaElement;
+  /**
+   * Visual variant of the textarea
+   */
+  readonly variant: import("@angular/core").InputSignal<"outline" | "filled">;
+  /**
+   * Size of the textarea
+   */
+  readonly size: import("@angular/core").InputSignal<"xs" | "sm" | "md" | "lg">;
+  /**
+   * Whether the textarea is disabled
+   */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the textarea is in error state
+   */
+  readonly error: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the textarea is required
+   */
+  readonly required: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the textarea is readonly
+   */
+  readonly readonly: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Placeholder text
+   */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /**
+   * Label text displayed above the textarea
+   */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /**
+   * Helper text displayed below the textarea
+   */
+  readonly helperText: import("@angular/core").InputSignal<string>;
+  /**
+   * Error message displayed when error is true
+   */
+  readonly errorMessage: import("@angular/core").InputSignal<string>;
+  /**
+   * ARIA label for accessibility
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  /**
+   * Number of visible text rows
+   */
+  readonly rows: import("@angular/core").InputSignal<number>;
+  /**
+   * Maximum number of characters allowed
+   */
+  readonly maxLength: import("@angular/core").InputSignal<number | undefined>;
+  /**
+   * Whether to show character count
+   */
+  readonly showCharacterCount: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether to automatically resize based on content
+   */
+  readonly autoResize: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Minimum number of rows for auto-resize
+   */
+  readonly minRows: import("@angular/core").InputSignal<number>;
+  /**
+   * Maximum number of rows for auto-resize
+   */
+  readonly maxRows: import("@angular/core").InputSignal<number | undefined>;
+  /**
+   * Emitted when value changes
+   */
+  readonly valueChange: import("@angular/core").OutputEmitterRef<string>;
+  /** Per-instance id: links label, error and helper text to the control. */
+  readonly textareaId: string;
+  readonly errorId: string;
+  readonly helperId: string;
+  readonly value: import("@angular/core").WritableSignal<string>;
+  private readonly formDisabled;
+  /**
+   * Computed disabled state from both input and form control
+   */
+  readonly isDisabled: import("@angular/core").Signal<boolean>;
+  readonly currentCharacterCount: import("@angular/core").Signal<number>;
+  readonly characterCountText: import("@angular/core").Signal<string>;
+  readonly isOverLimit: import("@angular/core").Signal<boolean>;
+  /** Whether an error message is shown (drives aria-describedby) */
+  readonly showsError: import("@angular/core").Signal<boolean>;
+  /** Whether the helper text is shown (error message takes precedence) */
+  readonly showsHelper: import("@angular/core").Signal<boolean>;
+  readonly describedBy: import("@angular/core").Signal<string | null>;
+  /**
+   * Computed classes for the textarea element
+   */
+  readonly textareaClasses: import("@angular/core").Signal<string>;
+  private onChange;
+  private onTouched;
+  constructor();
+  /**
+   * Handle input changes
+   */
+  onInput(value: string): void;
+  /**
+   * Handle blur event
+   */
+  onBlur(): void;
+  writeValue(value: string | null | undefined): void;
+  registerOnChange(fn: (value: string) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(isDisabled: boolean): void;
+  private adjustHeight;
+  /** Pixel height for `rows` lines incl. vertical padding; undefined when it cannot be measured. */
+  private rowsToHeight;
+  protected getInputValue(event: Event): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TextareaComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<TextareaComponent, "lc-textarea", never, {
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "required": {
+      "alias": "required";
+      "required": false;
+      "isSignal": true;
+    };
+    "readonly": {
+      "alias": "readonly";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "helperText": {
+      "alias": "helperText";
+      "required": false;
+      "isSignal": true;
+    };
+    "errorMessage": {
+      "alias": "errorMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "rows": {
+      "alias": "rows";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxLength": {
+      "alias": "maxLength";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCharacterCount": {
+      "alias": "showCharacterCount";
+      "required": false;
+      "isSignal": true;
+    };
+    "autoResize": {
+      "alias": "autoResize";
+      "required": false;
+      "isSignal": true;
+    };
+    "minRows": {
+      "alias": "minRows";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxRows": {
+      "alias": "maxRows";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "valueChange": "valueChange";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,91 @@
+import * as i0 from "@angular/core";
+/**
+ * Theme Types
+ * Defines theme modes and configuration interfaces
+ */
+export type ThemeMode = 'light' | 'dark';
+export interface ThemeConfig {
+  mode: ThemeMode;
+  autoDetect?: boolean;
+}
+export interface ThemeState {
+  currentMode: ThemeMode;
+  prefersDark: boolean;
+}
+/**
+ * Theme Service
+ *
+ * Design System 2.0 is dark-first: dark is the default theme. Light remains a
+ * fully supported opt-in. Theme is applied via a `dark` / `light` class on the
+ * document root (`:root.dark` / `:root.light`), matching the theme stylesheets.
+ *
+ * On construction the service adopts a theme that is already there instead of
+ * overwriting it: a `dark` / `light` class an app put on `<html>` before
+ * bootstrap (the usual no-flash inline script) wins, then the mode persisted
+ * under {@link ThemeService.STORAGE_KEY} from a previous visit, then the
+ * dark-first default. `setTheme` persists the choice; `useSystemPreference`
+ * follows the OS setting live until the next explicit `setTheme`.
+ *
+ * Following the OS without a script (3.3, G-6): with `<html class="system">`
+ * the stylesheets themselves switch with `prefers-color-scheme`, from the
+ * first paint on. The service then only mirrors the OS (`currentTheme`,
+ * `isDark`, the meta theme-color) and adds no `light` / `dark` class, until an
+ * explicit `setTheme` replaces `system` with the chosen class.
+ */
+export declare class ThemeService {
+  /** localStorage key under which the chosen mode is persisted. */
+  static readonly STORAGE_KEY = "lc-theme";
+  /** Root class that lets the stylesheets follow the OS color scheme (G-6). */
+  static readonly SYSTEM_CLASS = "system";
+  private readonly platformId;
+  private readonly isBrowser;
+  private readonly destroyRef;
+  private static readonly META_COLOR;
+  private readonly themeState;
+  readonly currentTheme: import("@angular/core").Signal<ThemeState>;
+  readonly isDark: import("@angular/core").Signal<boolean>;
+  /** OS color-scheme query while `useSystemPreference()` is following it. */
+  private systemQuery;
+  /**
+   * True while the root carries the `system` class: the CSS follows the OS,
+   * so the service mirrors it and leaves the root classes alone.
+   */
+  private cssFollowsSystem;
+  private readonly systemChangeHandler;
+  constructor();
+  /**
+   * Set the active theme mode. Persists the choice and stops following the
+   * OS preference (an explicit choice must not be overridden by the next OS
+   * change).
+   */
+  setTheme(mode: ThemeMode): void;
+  /**
+   * Toggle between dark and light.
+   */
+  toggleTheme(): void;
+  /**
+   * Adopt the OS-level color-scheme preference and keep following it: a later
+   * change of the OS setting switches the theme too, until `setTheme` is called.
+   * Under a `system` root class the stylesheets already follow the OS; the
+   * service then only mirrors it and sets no `light` / `dark` class.
+   */
+  useSystemPreference(): void;
+  private stopFollowingSystem;
+  /** Update state + DOM without touching persistence or the system listener. */
+  private applyMode;
+  /** The root asks the CSS to follow the OS: `system` without `light` / `dark`. */
+  private rootFollowsSystem;
+  /**
+   * Mode to start with: a class already on the root, then the persisted
+   * choice, then the dark-first default.
+   */
+  private readInitialMode;
+  private readPersisted;
+  private persist;
+  /**
+   * Apply the theme class + mobile meta color to the document.
+   */
+  private applyTheme;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}