@lifecorner/angular-ui-kit 3.28.0 → 3.29.0

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

@@ -1,11 +1,27 @@
 import { ControlValueAccessor } from "@angular/forms";
 import * as i0 from "@angular/core";
 export type DateValue = Date | string | null;
+/** What `lc-datepicker` picks: a day (`'day'`) or a month (`'month'`). */
+export type DatepickerGranularity = 'day' | 'month';
+/** One cell of the month grid (`granularity="month"`). */
+interface MonthCell {
+  /** 0–11. */
+  month: number;
+  /** Visible name („Juli“). */
+  name: string;
+  /** Accessible name with the year („Juli 2026“). */
+  label: string;
+  selected: boolean;
+  current: boolean;
+  disabled: boolean;
+}
 /**
  * Datepicker component for date selection with calendar overlay.
  *
  * Features:
  * - Calendar popup with month and year navigation
+ * - Month granularity (3.29): `granularity="month"` picks a month in a
+ *   12-month grid with year navigation and emits its first day
  * - Manual date entry in the configured format
  * - Min/max date constraints
  * - Disabled specific dates and weekends
@@ -18,6 +34,7 @@ export type DateValue = Date | string | null;
  * @example
  * ```html
  * <lc-datepicker placeholder="Select date" [(ngModel)]="selectedDate" />
+ * <lc-datepicker granularity="month" format="YYYY-MM" placeholder="Select a month" [(ngModel)]="validFrom" />
  * ```
  */
 export declare class DatepickerComponent implements ControlValueAccessor {
@@ -102,6 +119,42 @@ export declare class DatepickerComponent implements ControlValueAccessor {
   readonly todayLabel: import("@angular/core").InputSignal<string>;
   /** Appended to the selected day's accessible name (`…, selected`). */
   readonly selectedAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Pick a day (`'day'`) or a month (`'month'`, 3.29, regeln row 1). Month:
+   * a 12-month grid with year navigation; `dateChange` and the forms value
+   * are the 1st of the month (local midnight, as day mode); `format` should
+   * be a month format (`'YYYY-MM'`; a `DD` token shows `01`), and typing
+   * „2026-07“ commits like a day. `minDate`/`maxDate` keep a month
+   * selectable when any of its days is in range; a `disabledDates` entry
+   * disables its whole month; `disableWeekends` is ignored. Set
+   * `placeholder` (e.g. "Select a month"). Keys in the grid: arrows move by
+   * month and row, PageUp/PageDown by year, Home/End to the first/last month
+   * of the year, Enter/Space select, Escape closes.
+   * @default 'day'
+   */
+  readonly granularity: import("@angular/core").InputSignal<DatepickerGranularity>;
+  /**
+   * Accessible name of the previous-year button (month mode).
+   * @default 'Previous year'
+   */
+  readonly previousYearAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Accessible name of the next-year button (month mode).
+   * @default 'Next year'
+   */
+  readonly nextYearAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Accessible name of the month dialog (month mode; `dialogAriaLabel`
+   * stays the day dialog's).
+   * @default 'Choose month'
+   */
+  readonly monthDialogAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Label of the quick action that shows the current year (month mode; day
+   * mode keeps `todayLabel`).
+   * @default 'This month'
+   */
+  readonly currentMonthLabel: import("@angular/core").InputSignal<string>;
   /**
    * Emitted when date selection changes
    */
@@ -122,6 +175,8 @@ export declare class DatepickerComponent implements ControlValueAccessor {
   private readonly formDisabled;
   /** Effective disabled state: the `disabled` input OR the form control's disabled state. */
   readonly isDisabled: import("@angular/core").Signal<boolean>;
+  /** Month granularity (3.29). */
+  protected readonly isMonthMode: import("@angular/core").Signal<boolean>;
   readonly formattedDate: import("@angular/core").Signal<string>;
   /**
    * Text currently shown in the input. Follows the selected date, but the user
@@ -134,6 +189,18 @@ export declare class DatepickerComponent implements ControlValueAccessor {
   readonly currentMonthName: import("@angular/core").Signal<string>;
   /** Weekday headers in grid order, starting at `firstDayOfWeek`. */
   readonly weekdayLabels: import("@angular/core").Signal<string[]>;
+  /** Header title: „July 2026“ (day mode) or the year „2026“ (month mode). */
+  protected readonly headerTitle: import("@angular/core").Signal<string>;
+  /** The twelve months of the shown year (month mode). */
+  protected readonly monthCells: import("@angular/core").Signal<MonthCell[]>;
+  /** The month grid's four rows of three. */
+  protected readonly monthRows: import("@angular/core").Signal<MonthCell[][]>;
+  /**
+   * The month cell that is the grid's one tab stop (roving `tabindex`): the
+   * selected month in the shown year, else the current month, else the first
+   * enabled one; `-1` when the whole year is disabled. Keys move it.
+   */
+  protected readonly monthTabStop: import("@angular/core").WritableSignal<number>;
   /** `firstDayOfWeek` clamped to 0–6. */
   private readonly gridStart;
   /** id of the helper/error text the input is described by (aria-describedby) */
@@ -143,6 +210,7 @@ export declare class DatepickerComponent implements ControlValueAccessor {
    */
   readonly datepickerClasses: import("@angular/core").Signal<string>;
   private readonly document;
+  private readonly injector;
   private onChange;
   private onTouched;
   /**
@@ -196,6 +264,22 @@ export declare class DatepickerComponent implements ControlValueAccessor {
    * Navigate to today
    */
   goToToday(): void;
+  /** Month mode: show the previous year. */
+  protected previousYear(): void;
+  /** Month mode: show the next year. */
+  protected nextYear(): void;
+  /** Month mode's quick action: show the current year. */
+  protected showCurrentYear(): void;
+  /** Month mode: select `month` of the shown year (its 1st), emit, close and focus the field. */
+  protected selectMonth(month: number): void;
+  /**
+   * Keys on a month cell (APG date grid): arrows ±1 month and ±3 (a row),
+   * PageUp/PageDown ±1 year (the nearest enabled month of that year),
+   * Home/End the first/last enabled month of the year; disabled months are
+   * skipped, and with none left focus stays. Enter/Space select, Escape
+   * closes. Arrows only move focus.
+   */
+  protected onMonthKeydown(event: KeyboardEvent, month: number): void;
   /**
    * Handle input change (manual date entry). Partial input is kept as text
    * only; the model changes once the text is a complete, valid, selectable date.
@@ -221,6 +305,36 @@ export declare class DatepickerComponent implements ControlValueAccessor {
    * Check if date is in current month
    */
   isCurrentMonth(date: Date): boolean;
+  /** The selected month of the shown year, else the current month, else the first enabled one; `-1` if none. */
+  private defaultMonthTabStop;
+  /**
+   * Keys in the field while the month panel is open: ArrowDown moves focus
+   * into the grid, Escape closes, Enter closes when a month is selected;
+   * the other keys stay with the text (caret, typing „2026-07“).
+   */
+  private onMonthFieldKeyDown;
+  /**
+   * Month mode: a month is disabled when all its days are before `minDate`
+   * or after `maxDate` (compared by day), or when `disabledDates` holds one
+   * of its days. `disableWeekends` does not apply.
+   */
+  private isMonthDisabled;
+  /** A typed date that cannot be committed: its day (day mode) or its month (month mode) is disabled. */
+  private isUnavailable;
+  /** Whether `date` is the current selection: the same day, or in month mode the same month. */
+  private isSameSelection;
+  /** Year and month (0–11) of a month index `year * 12 + month`. */
+  private monthAt;
+  /** The next enabled month from `index` in steps of `step` (up to ten years), or `null`. */
+  private nextEnabledMonth;
+  /** `month` of `year` if enabled, else the enabled month of that year nearest to it, or `null`. */
+  private nearestEnabledMonth;
+  /** The first (`dir` 1) or last (`dir` -1) enabled month of `year`, or `null`. */
+  private edgeEnabledMonth;
+  /** Moves the grid's tab stop and focus to the month `index`; the shown year follows. */
+  private moveMonthFocus;
+  /** Focuses the month cell `month` (0–11) of the open panel; the cells are kept across years. */
+  private focusMonthCell;
   private commitDate;
   private showMonthOf;
   private restoreFocusFromPanel;
@@ -234,7 +348,8 @@ export declare class DatepickerComponent implements ControlValueAccessor {
    * Strict parse: the text must match the format's length, carry digits at the
    * YYYY/MM/DD positions and round-trip through formatDate (which rejects
    * things like month 13 or Feb 31 that `new Date` would silently roll over).
-   * Returns null for partial or invalid input.
+   * Returns null for partial or invalid input. Month mode also takes a format
+   * without `DD` (`YYYY-MM`) and returns the 1st of the month.
    */
   private parseDate;
   protected getInputValue(event: Event): string;
@@ -355,9 +470,35 @@ export declare class DatepickerComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "granularity": {
+      "alias": "granularity";
+      "required": false;
+      "isSignal": true;
+    };
+    "previousYearAriaLabel": {
+      "alias": "previousYearAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "nextYearAriaLabel": {
+      "alias": "nextYearAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "monthDialogAriaLabel": {
+      "alias": "monthDialogAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "currentMonthLabel": {
+      "alias": "currentMonthLabel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "dateChange": "dateChange";
     "opened": "opened";
     "closed": "closed";
   }, never, never, true, never>;
-}
+}
+export {};

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

@@ -27,6 +27,15 @@ interface MoneyFormatOptions {
    */
   showCurrency?: boolean;
 }
+/** Options of {@link formatMoneyRange}: those of {@link formatMoney}, for both amounts, and the joining word. */
+interface MoneyRangeFormatOptions extends MoneyFormatOptions {
+  /**
+   * Word between the two amounts, in `text` and in `spoken`. Empty: from
+   * `locale`, „bis“ for German (`de`), "to" for every other locale.
+   * @default ''
+   */
+  separatorLabel?: string;
+}
 /** A formatted amount: the visible text and the words a screen reader speaks. */
 interface MoneyText {
   /**
@@ -58,6 +67,33 @@ declare function moneyDirection(locale: string): 'ltr' | 'rtl';
  * ```
  */
 export declare function formatMoney(amountMinor: number, currency: string, options?: MoneyFormatOptions): MoneyText | null;
+/** U+00A0: glues the joining word of a range to the second amount. */
+declare const MONEY_RANGE_GLUE: string;
+/** The word between the amounts of a range: „bis“ for a German locale (`de`), "to" otherwise. */
+declare function moneyRangeSeparator(locale: string): string;
+/** Both amounts of a range and the joining word; `null` if either amount fails {@link formatMoney}. */
+declare function moneyRangeParts(fromMinor: number, toMinor: number, currency: string, options?: MoneyRangeFormatOptions): {
+  from: MoneyText;
+  to: MoneyText;
+  word: string;
+} | null;
+/**
+ * Formats a range of two amounts in minor units with the same currency and
+ * options („9,99 € bis 12,99 €“), for table `formatter`s and texts. The
+ * joining word is glued to the second amount with a no-break space (U+00A0),
+ * so a line breaks only before it. The amounts are kept as given (no
+ * sorting; equal amounts give a range). Returns `null` if either amount fails
+ * {@link formatMoney}. `lc-money` shows the same with `rangeToMinor`.
+ *
+ * @example
+ * ```ts
+ * formatMoneyRange(999, 1299, 'EUR', { locale: 'de-DE' });
+ * // { text: '9,99 € bis 12,99 €', spoken: '9,99 Euro bis 12,99 Euro' }
+ * formatMoneyRange(999, 1299, 'EUR', { locale: 'en-US' });
+ * // { text: '€9.99 to €12.99', spoken: '9.99 euros to 12.99 euros' }
+ * ```
+ */
+export declare function formatMoneyRange(fromMinor: number, toMinor: number, currency: string, options?: MoneyRangeFormatOptions): MoneyText | null;
 /**
  * Displays an amount of money (3.16, BA-4): locale, currency, sign, tabular
  * figures and a spoken text. Display only, no input parsing or conversion.
@@ -77,7 +113,11 @@ export declare function formatMoney(amountMinor: number, currency: string, optio
  *   „Kosten in €“); the spoken text keeps the currency.
  * - `locale` empty: the app's `LOCALE_ID` (Angular's default `en-US`), the
  *   same on the server and in the browser.
- * - For table `formatter`s and texts use {@link formatMoney}.
+ * - A range (3.29, CC-1): `rangeToMinor` adds an upper amount, „9,99 € bis
+ *   12,99 €“, read once („9,99 Euro bis 12,99 Euro“). It may wrap before the
+ *   joining word, never inside an amount.
+ * - For table `formatter`s and texts use {@link formatMoney} and
+ *   {@link formatMoneyRange}.
  *
  * Separate a `lc-money` from adjacent text with a space in your template, so
  * the spoken text does not run into the words around it.
@@ -85,6 +125,7 @@ export declare function formatMoney(amountMinor: number, currency: string, optio
  * @example
  * ```html
  * <lc-money [amountMinor]="-4217" currency="EUR" locale="de-DE" />
+ * <lc-money [amountMinor]="999" [rangeToMinor]="1299" currency="EUR" locale="de-DE" />
  * ```
  */
 export declare class MoneyComponent {
@@ -134,9 +175,37 @@ export declare class MoneyComponent {
    * @default true
    */
   readonly showCurrency: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Upper amount of a range, in minor units of the same `currency` (3.29,
+   * CC-1). Shows „9,99 € bis 12,99 €“ (`de-DE`) or "€9.99 to €12.99"
+   * (`en-US`) with the same `locale`, `signDisplay` and `showCurrency`, read
+   * once („9,99 Euro bis 12,99 Euro“). Rendered as given: no sorting, equal
+   * amounts show a range. The range may wrap before the joining word, never
+   * inside an amount. Not a safe integer: the single amount (a dev warning).
+   * `null`/`undefined`: no range.
+   * @default undefined
+   */
+  readonly rangeToMinor: import("@angular/core").InputSignal<number | null | undefined>;
+  /**
+   * Word between the amounts of a range, shown and spoken. Empty: from the
+   * locale, „bis“ for German (`de`), "to" for every other locale.
+   * @default ''
+   */
+  readonly rangeSeparatorLabel: import("@angular/core").InputSignal<string>;
   /** The locale in use: the `locale` input or the app's `LOCALE_ID`. */
   protected readonly effectiveLocale: import("@angular/core").Signal<string>;
   protected readonly formatted: import("@angular/core").Signal<import("@lifecorner/angular-ui-kit/money").MoneyText | null>;
+  /**
+   * The range's parts (3.29): both visible amounts, the joining text between
+   * them (the word glued to the second amount by U+00A0, so a line breaks
+   * only before it) and the one spoken text. `null`: no range.
+   */
+  protected readonly range: import("@angular/core").Signal<{
+    from: import("@lifecorner/angular-ui-kit/money").MoneyText;
+    to: import("@lifecorner/angular-ui-kit/money").MoneyText;
+    joint: string;
+    spoken: string;
+  } | null>;
   protected readonly dir: import("@angular/core").Signal<"ltr" | "rtl">;
   constructor();
   static ɵfac: i0.ɵɵFactoryDeclaration<MoneyComponent, never>;
@@ -176,6 +245,16 @@ export declare class MoneyComponent {
       "required": false;
       "isSignal": true;
     };
+    "rangeToMinor": {
+      "alias": "rangeToMinor";
+      "required": false;
+      "isSignal": true;
+    };
+    "rangeSeparatorLabel": {
+      "alias": "rangeSeparatorLabel";
+      "required": false;
+      "isSignal": true;
+    };
   }, {}, never, never, true, never>;
 }
-export type { MoneyFormatOptions, MoneySignDisplay, MoneyText };
+export type { MoneyFormatOptions, MoneyRangeFormatOptions, MoneySignDisplay, MoneyText };

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

@@ -1,5 +1,7 @@
 import { ControlValueAccessor } from "@angular/forms";
 import * as i0 from "@angular/core";
+/** Height of `lc-number-input`'s field and steppers: `xs` 24, `sm` 32, `md` 40 (the default), `lg` 44 px. */
+export type NumberInputSize = 'xs' | 'sm' | 'md' | 'lg';
 export declare class NumberInputComponent implements ControlValueAccessor {
   private static nextId;
   /** Minimum value */
@@ -24,6 +26,36 @@ export declare class NumberInputComponent implements ControlValueAccessor {
   decrementAriaLabel: import("@angular/core").InputSignal<string>;
   /** Accessible name of the plus button. */
   incrementAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * BCP 47 locale of the shown number (3.29, regeln row 3). Only the decimal
+   * separator follows it: `de-DE` shows „7,5“, `en-US` "7.5"; a locale whose
+   * separator is neither `,` nor `.` shows a point. No grouping. `''`: a
+   * point, as before. Typing accepts `,` and `.` in every locale and shows
+   * the locale's separator; the model stays a `number`; blur clamps to
+   * `min`/`max`.
+   * @default ''
+   */
+  locale: import("@angular/core").InputSignal<string>;
+  /**
+   * Unit shown after the value inside the field („7,5 %“, 3.29). Not typed
+   * and not part of the model; with a suffix the value aligns to the end.
+   * Screen readers read `suffixAriaLabel` (or the suffix) once after the value.
+   * @default ''
+   */
+  suffix: import("@angular/core").InputSignal<string>;
+  /**
+   * Spoken unit („Prozent“), read once after the value as the field's
+   * description (before the helper or error text). `''`: the `suffix`.
+   * @default ''
+   */
+  suffixAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Height of the field and the steppers (3.29, regeln row 4): `xs` 24,
+   * `sm` 32, `md` 40 (as before), `lg` 44 px (touch: field and both
+   * steppers at least 44 × 44 px).
+   * @default 'md'
+   */
+  size: import("@angular/core").InputSignal<NumberInputSize>;
   /** Emits value on change */
   valueChange: import("@angular/core").OutputEmitterRef<number>;
   /** Per-instance id wiring the label, hint and error to the field. */
@@ -44,6 +76,12 @@ export declare class NumberInputComponent implements ControlValueAccessor {
   private readonly stepPrecision;
   /** Fractions need a decimal key on touch keyboards; integers do not. */
   protected readonly inputMode: import("@angular/core").Signal<"decimal" | "numeric">;
+  /** The decimal separator shown in the field: the `locale`'s `,` or `.`. */
+  private readonly separator;
+  /** The spoken unit: `suffixAriaLabel`, else the `suffix`; `''` = none. */
+  protected readonly spokenSuffix: import("@angular/core").Signal<string>;
+  /** Icon size of the steppers: `xs` (16 px) for the `xs`/`sm` fields, `sm` (20 px) as before. */
+  protected readonly iconSize: import("@angular/core").Signal<"xs" | "sm">;
   protected readonly describedBy: import("@angular/core").Signal<string | null>;
   protected containerClasses: import("@angular/core").Signal<string>;
   protected canDecrement: import("@angular/core").Signal<boolean>;
@@ -56,7 +94,10 @@ export declare class NumberInputComponent implements ControlValueAccessor {
   onKeydown(event: KeyboardEvent): void;
   onInput(event: Event): void;
   onBlur(): void;
+  /** The model as text: `String(val)` with the locale's decimal separator, no grouping. */
   private format;
+  /** A press on the visible unit puts the caret in the field, as a click on the field would. */
+  protected focusField(event: MouseEvent): void;
   private clamp;
   private setValue;
   writeValue(val: number | null): void;
@@ -120,6 +161,26 @@ export declare class NumberInputComponent implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "suffix": {
+      "alias": "suffix";
+      "required": false;
+      "isSignal": true;
+    };
+    "suffixAriaLabel": {
+      "alias": "suffixAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
   }, {
     "valueChange": "valueChange";
   }, never, never, true, never>;