@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1,116 @@
+import * as i0 from "@angular/core";
+export type ProgressBarColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+export type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ProgressBarVariant = 'linear' | 'circular';
+/**
+ * Progress bar component for displaying completion status.
+ *
+ * Features:
+ * - Linear and circular progress variants
+ * - Color theme options (primary, secondary, success, warning, error)
+ * - Multiple size presets (xs, sm, md, lg)
+ * - Animated value transitions
+ * - Accessible with ARIA progressbar role
+ *
+ * @example
+ * ```html
+ * <lc-progress-bar [value]="75" color="primary" size="md"></lc-progress-bar>
+ * <lc-progress-bar [value]="50" variant="circular" color="success"></lc-progress-bar>
+ *
+ * <!-- thin bar inside a list row: fixed width, flows with the line -->
+ * <lc-progress-bar [value]="60" size="sm" [inline]="true"
+ *                  style="--lc-progress-bar-height: 6px"></lc-progress-bar>
+ * ```
+ */
+export declare class ProgressBarComponent {
+  /**
+   * Progress value between 0 and 100.
+   * @default 0
+   */
+  value: import("@angular/core").InputSignal<number>;
+  /**
+   * Color theme.
+   * @default 'primary'
+   */
+  color: import("@angular/core").InputSignal<ProgressBarColor>;
+  /**
+   * Height/thickness of the bar.
+   * @default 'md'
+   */
+  size: import("@angular/core").InputSignal<ProgressBarSize>;
+  /**
+   * Visual variant.
+   * @default 'linear'
+   */
+  variant: import("@angular/core").InputSignal<ProgressBarVariant>;
+  /**
+   * Whether to show the percentage label.
+   * @default false
+   */
+  showLabel: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Inline mode for list rows: the bar flows with the surrounding line at a
+   * fixed width instead of filling its container. Width is settable via
+   * `--lc-progress-bar-inline-width` (default 5rem), the track height via
+   * `--lc-progress-bar-height` (e.g. 6px), which also works in block mode.
+   * @default false
+   */
+  inline: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Whether the progress is indeterminate (animated, no fixed value).
+   * @default false
+   */
+  indeterminate: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Accessible label for screen readers.
+   */
+  ariaLabel: import("@angular/core").InputSignal<string>;
+  protected clampedValue: import("@angular/core").Signal<number>;
+  protected barClasses: import("@angular/core").Signal<string>;
+  protected readonly circleRadius = 40;
+  protected readonly circleCircumference: number;
+  protected strokeDashoffset: import("@angular/core").Signal<number>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "lc-progress-bar", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLabel": {
+      "alias": "showLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "inline": {
+      "alias": "inline";
+      "required": false;
+      "isSignal": true;
+    };
+    "indeterminate": {
+      "alias": "indeterminate";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,67 @@
+import * as i0 from "@angular/core";
+export type ProgressRingColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+export type ProgressRingSize = 'xs' | 'sm' | 'md' | 'lg';
+export declare class ProgressRingComponent {
+  /** Value between 0 and 100. */
+  value: import("@angular/core").InputSignal<number>;
+  /** Color theme. */
+  color: import("@angular/core").InputSignal<ProgressRingColor>;
+  /** Size preset. */
+  size: import("@angular/core").InputSignal<ProgressRingSize>;
+  /** Show percentage text in center. */
+  showValue: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Alias of `showValue`, named like `lc-progress-bar`'s `showLabel`. When
+   * set it wins over `showValue`.
+   */
+  showLabel: import("@angular/core").InputSignal<boolean | undefined>;
+  /** Accessible name of the progress ring. */
+  ariaLabel: import("@angular/core").InputSignal<string>;
+  private readonly SIZE_MAP;
+  private readonly STROKE_MAP;
+  protected readonly svgSize: import("@angular/core").Signal<number>;
+  protected readonly strokeW: import("@angular/core").Signal<number>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  protected readonly center: import("@angular/core").Signal<number>;
+  protected readonly radius: import("@angular/core").Signal<number>;
+  protected readonly circumference: import("@angular/core").Signal<number>;
+  /** `value` clamped to the 0–100 range (drives arc, text and ARIA). */
+  protected readonly clampedValue: import("@angular/core").Signal<number>;
+  protected readonly shouldShowValue: import("@angular/core").Signal<boolean>;
+  protected readonly dashOffset: import("@angular/core").Signal<number>;
+  protected readonly fontSize: import("@angular/core").Signal<string>;
+  protected readonly displayValue: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ProgressRingComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ProgressRingComponent, "lc-progress-ring", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "showValue": {
+      "alias": "showValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLabel": {
+      "alias": "showLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,137 @@
+import * as i0 from "@angular/core";
+/**
+ * Sign-in providers the button can draw. Only Google today; Apple follows as a
+ * new member of this union (no other API change), with its own artwork and the
+ * colours of Apple's Human Interface Guidelines.
+ */
+export type ProviderButtonProvider = 'google';
+/**
+ * Which of the provider's titles the button shows when no `label` is set:
+ * `sign-in` "Sign in with Google", `sign-up` "Sign up with Google",
+ * `continue` "Continue with Google" — the three titles Google recommends.
+ */
+export type ProviderButtonText = 'sign-in' | 'sign-up' | 'continue';
+/**
+ * The provider's colour theme. `auto` follows the app theme (light on a light
+ * page, dark on a dark page); `light`, `dark` and `neutral` (Google only) pin
+ * one theme.
+ */
+export type ProviderButtonAppearance = 'auto' | 'light' | 'dark' | 'neutral';
+/** `md` is Google's standard 40 px; `lg` is 48.5 px, the height of `lc-button size="lg"`. */
+export type ProviderButtonSize = 'md' | 'lg';
+/** `pill` (the kit's button shape) or `rectangular` (Google's 4 px corners). */
+export type ProviderButtonShape = 'pill' | 'rectangular';
+export type ProviderButtonType = 'button' | 'submit';
+/**
+ * "Sign in with Google" button drawn to Google's branding guidelines
+ * (https://developers.google.com/identity/branding-guidelines, last updated
+ * 2026-07-07): the standard "G" (self-hosted, no request to Google), Google
+ * Sans Medium 14/20 (the app self-hosts the font: SIL OFL 1.1, see the docs),
+ * padding 12 · logo · 10 · text · 12, and Google's light,
+ * dark and neutral colours. No Google script is loaded; the button starts the
+ * app's own redirect (often a form POST, hence `type="submit"`).
+ *
+ * @example
+ * ```html
+ * <form method="post" action="/v1/auth/providers/google/start">
+ *   <lc-provider-button provider="google" text="continue" label="Weiter mit Google"
+ *                       size="lg" [fullWidth]="true" type="submit" />
+ * </form>
+ * ```
+ */
+export declare class ProviderButtonComponent {
+  /** The sign-in provider. `google` only in this release; `apple` follows. */
+  readonly provider: import("@angular/core").InputSignal<"google">;
+  /** Which of the provider's titles to show when `label` is empty. */
+  readonly text: import("@angular/core").InputSignal<ProviderButtonText>;
+  /**
+   * The visible title — pass the provider's localized title
+   * (e.g. „Weiter mit Google“). Must say that the person signs in with the
+   * provider, never the provider's name alone. Empty = the provider's English
+   * title for `text`. Also the accessible name of an `iconOnly` button.
+   */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** Colour theme: `auto` follows the app theme; `neutral` is Google's grey fill. */
+  readonly appearance: import("@angular/core").InputSignal<ProviderButtonAppearance>;
+  /** `md` 40 px (Google's standard), `lg` 48.5 px (matches `lc-button size="lg"`, 44 px touch target). */
+  readonly size: import("@angular/core").InputSignal<ProviderButtonSize>;
+  /** `pill` (default, the kit's shape) or `rectangular` (4 px corners). */
+  readonly shape: import("@angular/core").InputSignal<ProviderButtonShape>;
+  /** Stretches the button to the container width; logo and title stay centred together. */
+  readonly fullWidth: import("@angular/core").InputSignal<boolean>;
+  /** Only the logo in a square (or round) button; `label` becomes its accessible name. */
+  readonly iconOnly: import("@angular/core").InputSignal<boolean>;
+  /** Busy state: shows a spinner after the title, sets `aria-busy` and blocks clicks. */
+  readonly loading: import("@angular/core").InputSignal<boolean>;
+  /** Disables the button. */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /** Native button type. `submit` when the button posts the form that starts the provider's redirect. */
+  readonly type: import("@angular/core").InputSignal<ProviderButtonType>;
+  /** Emitted on click while the button is neither disabled nor loading. */
+  readonly clicked: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly logoSrc: import("@angular/core").Signal<string>;
+  protected readonly title: import("@angular/core").Signal<string>;
+  protected readonly isDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  protected handleClick(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ProviderButtonComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ProviderButtonComponent, "lc-provider-button", never, {
+    "provider": {
+      "alias": "provider";
+      "required": false;
+      "isSignal": true;
+    };
+    "text": {
+      "alias": "text";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "appearance": {
+      "alias": "appearance";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "shape": {
+      "alias": "shape";
+      "required": false;
+      "isSignal": true;
+    };
+    "fullWidth": {
+      "alias": "fullWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "iconOnly": {
+      "alias": "iconOnly";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "clicked": "clicked";
+  }, never, never, true, never>;
+}

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

@@ -0,0 +1,113 @@
+import { ChartValueFormatter } from "@lifecorner/angular-ui-kit/internal/chart";
+import * as i0 from "@angular/core";
+export interface RadarChartSeries {
+  label: string;
+  /** One value per axis; drawn clamped to [0, max]. */
+  data: number[];
+  color?: string;
+}
+export declare class RadarChartComponent {
+  series: import("@angular/core").InputSignal<RadarChartSeries[]>;
+  /** Axis labels. */
+  axes: import("@angular/core").InputSignal<string[]>;
+  /** Max value for each axis. */
+  max: import("@angular/core").InputSignal<number>;
+  /** SVG size in pixels. */
+  size: import("@angular/core").InputSignal<number>;
+  /** Number of concentric grid rings. */
+  rings: import("@angular/core").InputSignal<number>;
+  /** Show axis labels. */
+  showLabels: import("@angular/core").InputSignal<boolean>;
+  /** Fill opacity for series polygons. */
+  fillOpacity: import("@angular/core").InputSignal<number>;
+  /** Show legend. */
+  showLegend: import("@angular/core").InputSignal<boolean>;
+  /** Formats values in the generated accessible summary. Defaults to a float-safe `String(value)`. */
+  formatValue: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /**
+   * Accessible name of the chart. Defaults to a generated summary listing each
+   * series with its per-axis values.
+   */
+  ariaLabel: import("@angular/core").InputSignal<string>;
+  protected readonly viewBox: import("@angular/core").Signal<string>;
+  protected readonly center: import("@angular/core").Signal<number>;
+  protected readonly radius: import("@angular/core").Signal<number>;
+  private readonly cleanSeries;
+  protected readonly axisCount: import("@angular/core").Signal<number>;
+  protected readonly gridRings: import("@angular/core").Signal<string[]>;
+  protected readonly axisLines: import("@angular/core").Signal<{
+    x2: number;
+    y2: number;
+  }[]>;
+  protected readonly labelItems: import("@angular/core").Signal<{
+    x: number;
+    y: number;
+    label: string;
+    anchor: string;
+  }[]>;
+  protected readonly seriesPolygons: import("@angular/core").Signal<{
+    points: string;
+    colorIndex: number;
+    customColor: string | null;
+    label: string;
+  }[]>;
+  protected readonly legendItems: import("@angular/core").Signal<{
+    label: string;
+    colorIndex: number;
+    customColor: string | null;
+  }[]>;
+  protected readonly effectiveAriaLabel: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<RadarChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<RadarChartComponent, "lc-radar-chart", never, {
+    "series": {
+      "alias": "series";
+      "required": true;
+      "isSignal": true;
+    };
+    "axes": {
+      "alias": "axes";
+      "required": false;
+      "isSignal": true;
+    };
+    "max": {
+      "alias": "max";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "rings": {
+      "alias": "rings";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLabels": {
+      "alias": "showLabels";
+      "required": false;
+      "isSignal": true;
+    };
+    "fillOpacity": {
+      "alias": "fillOpacity";
+      "required": false;
+      "isSignal": true;
+    };
+    "showLegend": {
+      "alias": "showLegend";
+      "required": false;
+      "isSignal": true;
+    };
+    "formatValue": {
+      "alias": "formatValue";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}