@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1,240 @@
+import * as i0 from "@angular/core";
+import { OnDestroy } from "@angular/core";
+export type GalleryLayout = 'grid' | 'masonry';
+export type GallerySize = 'sm' | 'md' | 'lg';
+export interface GalleryItem {
+  /** Image source URL */
+  src: string;
+  /** Thumbnail URL (falls back to src if not provided) */
+  thumbnail?: string;
+  /** Alt text for accessibility */
+  alt?: string;
+  /** Optional caption displayed below the image */
+  caption?: string;
+  /** Optional category for filtering */
+  category?: string;
+}
+/**
+ * Gallery component for displaying image collections with lightbox.
+ *
+ * Features:
+ * - Grid and masonry layout modes
+ * - Responsive column count via size presets (sm, md, lg thumbnails)
+ * - Configurable custom column count
+ * - Lightbox overlay with navigation (prev/next)
+ * - Keyboard navigation (Arrow keys, Escape); focus is trapped inside the
+ *   lightbox and returned to the originating thumbnail on close
+ * - Optional captions and category filtering
+ * - Lazy loading with placeholder shimmer
+ * - Zoom control in lightbox
+ * - Download button in lightbox
+ * - Dark/light theme support
+ *
+ * @example
+ * ```html
+ * <lc-gallery
+ *   [items]="images"
+ *   layout="grid"
+ *   size="md"
+ *   [showCaptions]="true" />
+ * ```
+ */
+export declare class GalleryComponent implements OnDestroy {
+  /** Array of gallery items to display */
+  readonly items: import("@angular/core").InputSignal<GalleryItem[]>;
+  /** Layout mode */
+  readonly layout: import("@angular/core").InputSignal<GalleryLayout>;
+  /** Thumbnail size preset — controls column count (sm=4col, md=3col, lg=2col) */
+  readonly size: import("@angular/core").InputSignal<GallerySize>;
+  /** Custom column count (overrides size preset) */
+  readonly columns: import("@angular/core").InputSignal<number | null>;
+  /** Whether to show captions below thumbnails */
+  readonly showCaptions: import("@angular/core").InputSignal<boolean>;
+  /** Whether clicking a thumbnail opens the lightbox */
+  readonly enableLightbox: import("@angular/core").InputSignal<boolean>;
+  /** Gap between items in pixels */
+  readonly gap: import("@angular/core").InputSignal<number>;
+  /** Aspect ratio for grid items (ignored in masonry mode) */
+  readonly aspectRatio: import("@angular/core").InputSignal<string>;
+  /** Label of the "all" category filter (shown when the items span more than one category). */
+  readonly filterAllLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the lightbox dialog. */
+  readonly lightboxAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the lightbox zoom-out button. */
+  readonly zoomOutAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the lightbox zoom-in button. */
+  readonly zoomInAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the lightbox reset-zoom button. */
+  readonly resetZoomAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the lightbox download button. */
+  readonly downloadAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the lightbox close button. */
+  readonly closeAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the previous-image button. */
+  readonly previousAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the next-image button. */
+  readonly nextAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible name of a thumbnail without `alt`, followed by its number. */
+  readonly imageFallbackLabel: import("@angular/core").InputSignal<string>;
+  /** Emitted when lightbox opens with item index */
+  readonly lightboxOpen: import("@angular/core").OutputEmitterRef<number>;
+  /** Emitted when lightbox closes */
+  readonly lightboxClose: import("@angular/core").OutputEmitterRef<void>;
+  private readonly injector;
+  private readonly closeBtn;
+  /** Element that opened the lightbox — focus returns there on close. */
+  private triggerElement;
+  protected lightboxIndex: import("@angular/core").WritableSignal<number | null>;
+  protected lightboxZoom: import("@angular/core").WritableSignal<number>;
+  protected loadedImages: import("@angular/core").WritableSignal<Set<number>>;
+  protected activeFilter: import("@angular/core").WritableSignal<string | null>;
+  protected gridColumns: import("@angular/core").Signal<number>;
+  protected gridStyle: import("@angular/core").Signal<{
+    'column-count': string;
+    'column-gap': string;
+    display?: undefined;
+    'grid-template-columns'?: undefined;
+    gap?: undefined;
+  } | {
+    display: string;
+    'grid-template-columns': string;
+    gap: string;
+    'column-count'?: undefined;
+    'column-gap'?: undefined;
+  }>;
+  protected itemStyle: import("@angular/core").Signal<{
+    'aspect-ratio'?: undefined;
+  } | {
+    'aspect-ratio': string;
+  }>;
+  protected categories: import("@angular/core").Signal<string[]>;
+  protected filteredItems: import("@angular/core").Signal<GalleryItem[]>;
+  protected showFilters: import("@angular/core").Signal<boolean>;
+  protected lightboxItem: import("@angular/core").Signal<GalleryItem | null>;
+  protected lightboxCounter: import("@angular/core").Signal<string>;
+  protected lightboxTransform: import("@angular/core").Signal<string>;
+  protected canGoPrev: import("@angular/core").Signal<boolean>;
+  protected canGoNext: import("@angular/core").Signal<boolean>;
+  ngOnDestroy(): void;
+  /**
+   * Opens the lightbox for `index`. Like a native button, Space activates on
+   * *keyup* (keydown only prevents the page scroll): activating on keydown
+   * would move focus to the Close button before the key is released, and the
+   * Space keyup would then immediately click Close.
+   */
+  protected openLightbox(index: number, event?: Event): void;
+  protected closeLightbox(restoreFocus?: boolean): void;
+  protected goToPrev(): void;
+  protected goToNext(): void;
+  protected zoomIn(): void;
+  protected zoomOut(): void;
+  protected resetZoom(): void;
+  protected downloadCurrent(): void;
+  protected setFilter(category: string | null): void;
+  protected onImageLoad(index: number): void;
+  protected isLoaded(index: number): boolean;
+  protected getThumbnail(item: GalleryItem): string;
+  protected trackByIndex(index: number): number;
+  /**
+   * Keyboard handling while the lightbox is open. Bound on the lightbox itself
+   * (focus is trapped inside it) and, as a fallback, on `document`. A handled
+   * Escape stops propagating so an enclosing modal/drawer doesn't close too.
+   */
+  protected onKeydown(event: KeyboardEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<GalleryComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<GalleryComponent, "lc-gallery", never, {
+    "items": {
+      "alias": "items";
+      "required": true;
+      "isSignal": true;
+    };
+    "layout": {
+      "alias": "layout";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "columns": {
+      "alias": "columns";
+      "required": false;
+      "isSignal": true;
+    };
+    "showCaptions": {
+      "alias": "showCaptions";
+      "required": false;
+      "isSignal": true;
+    };
+    "enableLightbox": {
+      "alias": "enableLightbox";
+      "required": false;
+      "isSignal": true;
+    };
+    "gap": {
+      "alias": "gap";
+      "required": false;
+      "isSignal": true;
+    };
+    "aspectRatio": {
+      "alias": "aspectRatio";
+      "required": false;
+      "isSignal": true;
+    };
+    "filterAllLabel": {
+      "alias": "filterAllLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "lightboxAriaLabel": {
+      "alias": "lightboxAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "zoomOutAriaLabel": {
+      "alias": "zoomOutAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "zoomInAriaLabel": {
+      "alias": "zoomInAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "resetZoomAriaLabel": {
+      "alias": "resetZoomAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "downloadAriaLabel": {
+      "alias": "downloadAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeAriaLabel": {
+      "alias": "closeAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "previousAriaLabel": {
+      "alias": "previousAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "nextAriaLabel": {
+      "alias": "nextAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "imageFallbackLabel": {
+      "alias": "imageFallbackLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "lightboxOpen": "lightboxOpen";
+    "lightboxClose": "lightboxClose";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,133 @@
+import * as i0 from "@angular/core";
+export interface GanttDependency {
+  from: string;
+  to: string;
+}
+export interface GanttTask {
+  id: string;
+  title: string;
+  start: Date | string;
+  end: Date | string;
+  progress?: number;
+  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+  group?: string;
+}
+interface NormalizedTask {
+  id: string;
+  title: string;
+  start: Date;
+  end: Date;
+  progress: number;
+  color: string;
+  group: string;
+}
+interface BarLayout {
+  task: NormalizedTask;
+  left: number;
+  width: number;
+  top: number;
+  progress: number;
+  colorClass: string;
+}
+interface DepLine {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+export declare class GanttChartComponent {
+  private static nextId;
+  /**
+   * Per-instance id for the SVG arrowhead marker. `<marker id>` is document
+   * global, so two charts on one page must not share it.
+   */
+  protected readonly markerId: string;
+  /** Tasks to display. */
+  tasks: import("@angular/core").InputSignal<GanttTask[]>;
+  /** Dependency links between tasks. */
+  dependencies: import("@angular/core").InputSignal<GanttDependency[]>;
+  /** Row height in px. */
+  rowHeight: import("@angular/core").InputSignal<number>;
+  /** Width of the label column in px. */
+  labelWidth: import("@angular/core").InputSignal<number>;
+  /** Column width per day in px. */
+  dayWidth: import("@angular/core").InputSignal<number>;
+  /** Show today marker. */
+  showToday: import("@angular/core").InputSignal<boolean>;
+  /** BCP 47 locale used for the month header labels. */
+  locale: import("@angular/core").InputSignal<string>;
+  /** Header text of the task label column. */
+  labelsHeader: import("@angular/core").InputSignal<string>;
+  /** Emits when a task bar is clicked / activated via keyboard. */
+  taskClick: import("@angular/core").OutputEmitterRef<GanttTask>;
+  private readonly normalizedTasks;
+  protected readonly timelineStart: import("@angular/core").Signal<Date>;
+  protected readonly timelineEnd: import("@angular/core").Signal<Date>;
+  protected readonly totalDays: import("@angular/core").Signal<number>;
+  protected readonly timelineWidth: import("@angular/core").Signal<number>;
+  protected readonly dayColumns: import("@angular/core").Signal<{
+    date: Date;
+    left: number;
+    label: number;
+    isWeekend: boolean;
+    monthLabel: string | null;
+  }[]>;
+  protected readonly monthHeaders: import("@angular/core").Signal<{
+    label: string;
+    left: number;
+    width: number;
+  }[]>;
+  protected readonly bars: import("@angular/core").Signal<BarLayout[]>;
+  protected readonly depLines: import("@angular/core").Signal<DepLine[]>;
+  protected readonly todayLeft: import("@angular/core").Signal<number>;
+  protected readonly gridHeight: import("@angular/core").Signal<number>;
+  protected onTaskClick(task: NormalizedTask): void;
+  protected onTaskKeydown(event: KeyboardEvent, task: NormalizedTask): void;
+  private startOfDay;
+  static ɵfac: i0.ɵɵFactoryDeclaration<GanttChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<GanttChartComponent, "lc-gantt-chart", never, {
+    "tasks": {
+      "alias": "tasks";
+      "required": true;
+      "isSignal": true;
+    };
+    "dependencies": {
+      "alias": "dependencies";
+      "required": false;
+      "isSignal": true;
+    };
+    "rowHeight": {
+      "alias": "rowHeight";
+      "required": false;
+      "isSignal": true;
+    };
+    "labelWidth": {
+      "alias": "labelWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "dayWidth": {
+      "alias": "dayWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "showToday": {
+      "alias": "showToday";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "labelsHeader": {
+      "alias": "labelsHeader";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "taskClick": "taskClick";
+  }, never, never, true, never>;
+}
+export {};

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

@@ -0,0 +1,94 @@
+import { ChartValueFormatter } from "@lifecorner/angular-ui-kit/internal/chart";
+import * as i0 from "@angular/core";
+export type GaugeColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+export type GaugeSize = 'sm' | 'md' | 'lg';
+export declare class GaugeComponent {
+  /** Value between 0 and max. */
+  value: import("@angular/core").InputSignal<number>;
+  /** Maximum value. */
+  max: import("@angular/core").InputSignal<number>;
+  /** Color theme. */
+  color: import("@angular/core").InputSignal<GaugeColor>;
+  /** Size preset. */
+  size: import("@angular/core").InputSignal<GaugeSize>;
+  /** Label text below the value. */
+  label: import("@angular/core").InputSignal<string>;
+  /** Value suffix (e.g. '%', '°C'). */
+  suffix: import("@angular/core").InputSignal<string>;
+  /** Show the value in the center. */
+  showValue: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Formats the displayed value. When set it replaces the default
+   * `Math.round(value) + suffix` entirely (the suffix is not appended).
+   */
+  formatValue: import("@angular/core").InputSignal<ChartValueFormatter | null>;
+  /**
+   * Accessible name of the gauge. Defaults to a generated summary such as
+   * "CPU: 72% of 100%", so assistive technology hears the value.
+   */
+  ariaLabel: import("@angular/core").InputSignal<string>;
+  private readonly SIZE_MAP;
+  protected readonly svgSize: import("@angular/core").Signal<number>;
+  protected readonly svgHeight: import("@angular/core").Signal<number>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  protected readonly cx: import("@angular/core").Signal<number>;
+  protected readonly cy: import("@angular/core").Signal<number>;
+  protected readonly radius: import("@angular/core").Signal<number>;
+  protected readonly strokeW: import("@angular/core").Signal<number>;
+  protected readonly fraction: import("@angular/core").Signal<number>;
+  protected readonly trackD: import("@angular/core").Signal<string>;
+  protected readonly valueD: import("@angular/core").Signal<string>;
+  private formatted;
+  protected readonly displayValue: import("@angular/core").Signal<string>;
+  protected readonly effectiveAriaLabel: import("@angular/core").Signal<string>;
+  protected readonly valueFontSize: import("@angular/core").Signal<string>;
+  protected readonly labelFontSize: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<GaugeComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<GaugeComponent, "lc-gauge", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "suffix": {
+      "alias": "suffix";
+      "required": false;
+      "isSignal": true;
+    };
+    "showValue": {
+      "alias": "showValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "formatValue": {
+      "alias": "formatValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}