@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

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

@@ -0,0 +1,222 @@
+import { ControlValueAccessor } from "@angular/forms";
+import { Observable } from "rxjs";
+import * as i0 from "@angular/core";
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  group?: string;
+  disabled?: boolean;
+}
+export type ComboboxValue = ComboboxOption | ComboboxOption[] | null;
+export type ComboboxSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * Combobox / async autocomplete component.
+ *
+ * Supports free-text input with sync/async option suggestions,
+ * single/multiple selection, create new entries, and keyboard navigation.
+ * The suggestion list is rendered in a CDK overlay so it is never clipped
+ * by `overflow: hidden` ancestors (cards, modals, table cells).
+ *
+ * @example
+ * ```html
+ * <lc-combobox
+ *   label="Assign to user"
+ *   [loadOptions]="searchUsers"
+ *   [(value)]="assignee"
+ *   allowCreate
+ * />
+ * ```
+ */
+export declare class ComboboxComponent implements ControlValueAccessor {
+  private static nextId;
+  /** Per-instance ids so label/listbox/options can be linked via ARIA */
+  readonly inputId: string;
+  readonly listboxId: string;
+  protected readonly createOptionId: string;
+  private readonly inputEl;
+  private readonly dropdownEl;
+  private readonly elRef;
+  private readonly querySubject;
+  /** Sync options */
+  readonly options: import("@angular/core").InputSignal<ComboboxOption[]>;
+  /** Async option loader */
+  readonly loadOptions: import("@angular/core").InputSignal<((query: string) => Observable<ComboboxOption[]>) | undefined>;
+  /** Debounce for async queries */
+  readonly debounceMs: import("@angular/core").InputSignal<number>;
+  /** Minimum characters before triggering search */
+  readonly minChars: import("@angular/core").InputSignal<number>;
+  /** Placeholder text */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** Label */
+  readonly label: import("@angular/core").InputSignal<string | undefined>;
+  /** Helper text */
+  readonly helperText: import("@angular/core").InputSignal<string | undefined>;
+  /** Error message */
+  readonly error: import("@angular/core").InputSignal<string | undefined>;
+  /** Disabled state */
+  readonly disabled: import("@angular/core").InputSignal<boolean>;
+  /** Allow multiple selections */
+  readonly multiple: import("@angular/core").InputSignal<boolean>;
+  /** Allow creating new entries */
+  readonly allowCreate: import("@angular/core").InputSignal<boolean>;
+  /** Show loading spinner (controlled) */
+  readonly loading: import("@angular/core").InputSignal<boolean>;
+  /** Empty state message */
+  readonly emptyMessage: import("@angular/core").InputSignal<string>;
+  /** Accessible name of the clear button. */
+  readonly clearAriaLabel: import("@angular/core").InputSignal<string>;
+  /** Label before the query in the "create" option (`allowCreate`): `Create "query"`. */
+  readonly createOptionLabel: import("@angular/core").InputSignal<string>;
+  /** Size */
+  readonly size: import("@angular/core").InputSignal<ComboboxSize>;
+  /** Value change event */
+  readonly valueChange: import("@angular/core").OutputEmitterRef<ComboboxValue>;
+  /** Query change event */
+  readonly queryChange: import("@angular/core").OutputEmitterRef<string>;
+  /** Option selected event */
+  readonly optionSelected: import("@angular/core").OutputEmitterRef<ComboboxOption>;
+  /** Created event (allowCreate) */
+  readonly created: import("@angular/core").OutputEmitterRef<string>;
+  /** Internal state */
+  protected query: import("@angular/core").WritableSignal<string>;
+  protected isOpen: import("@angular/core").WritableSignal<boolean>;
+  protected highlightedIndex: import("@angular/core").WritableSignal<number>;
+  protected asyncOptions: import("@angular/core").WritableSignal<ComboboxOption[]>;
+  protected isLoading: import("@angular/core").WritableSignal<boolean>;
+  /** Disabled via `setDisabledState` (reactive forms) */
+  private readonly formDisabled;
+  /** Effective disabled state: `disabled` input OR form control disabled */
+  protected readonly isDisabled: import("@angular/core").Signal<boolean>;
+  /** Selected values */
+  protected selectedSingle: import("@angular/core").WritableSignal<ComboboxOption | null>;
+  protected selectedMultiple: import("@angular/core").WritableSignal<ComboboxOption[]>;
+  /** Resolved visible options */
+  protected visibleOptions: import("@angular/core").Signal<ComboboxOption[]>;
+  /** Grouped options */
+  protected groupedOptions: import("@angular/core").Signal<{
+    label: string;
+    items: ComboboxOption[];
+  }[]>;
+  /** Flat list for keyboard nav */
+  protected flatOptions: import("@angular/core").Signal<ComboboxOption[]>;
+  /** Whether to show "Create" option */
+  protected showCreateOption: import("@angular/core").Signal<boolean>;
+  /** id of the highlighted option — announced via aria-activedescendant */
+  protected readonly activeDescendantId: import("@angular/core").Signal<string | null>;
+  /** ids referenced by aria-describedby (helper / error) */
+  protected readonly describedBy: import("@angular/core").Signal<string | null>;
+  /** Container classes */
+  protected containerClasses: import("@angular/core").Signal<string>;
+  protected optionId(index: number): string;
+  private onChange;
+  private onTouched;
+  constructor();
+  writeValue(value: ComboboxValue): void;
+  registerOnChange(fn: (value: ComboboxValue) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(isDisabled: boolean): void;
+  /**
+   * Clear the current selection and query. Emits `null` (single) or `[]`
+   * (multiple) exactly once, like a user-initiated deselect.
+   */
+  clear(): void;
+  protected onClearClick(): void;
+  protected onInputChange(event: Event): void;
+  protected onInputFocus(): void;
+  protected onInputBlur(): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  protected selectOption(option: ComboboxOption): void;
+  protected removeSelected(option: ComboboxOption): void;
+  protected onCreateNew(): void;
+  protected onDocumentClick(event: MouseEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ComboboxComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ComboboxComponent, "lc-combobox", never, {
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "loadOptions": {
+      "alias": "loadOptions";
+      "required": false;
+      "isSignal": true;
+    };
+    "debounceMs": {
+      "alias": "debounceMs";
+      "required": false;
+      "isSignal": true;
+    };
+    "minChars": {
+      "alias": "minChars";
+      "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;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "multiple": {
+      "alias": "multiple";
+      "required": false;
+      "isSignal": true;
+    };
+    "allowCreate": {
+      "alias": "allowCreate";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyMessage": {
+      "alias": "emptyMessage";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearAriaLabel": {
+      "alias": "clearAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "createOptionLabel": {
+      "alias": "createOptionLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "valueChange": "valueChange";
+    "queryChange": "queryChange";
+    "optionSelected": "optionSelected";
+    "created": "created";
+  }, never, never, true, never>;
+}

package/types/lifecorner-angular-ui-kit-confirm-dialog.d.ts

@@ -0,0 +1,211 @@
+import { ModalPlacement } from "@lifecorner/angular-ui-kit/modal";
+import * as i0 from "@angular/core";
+export type ConfirmDialogVariant = 'default' | 'destructive' | 'warning';
+/** Size of the confirm and cancel buttons (`lg` = 48.5 px, a 44 px target). */
+export type ConfirmDialogButtonSize = 'sm' | 'md' | 'lg';
+export interface RequireTextConfig {
+  prompt: string;
+  expected: string;
+}
+/**
+ * Confirm dialog component for confirming user actions.
+ *
+ * Builds on `<lc-modal>` to provide a standardized confirmation pattern
+ * with optional destructive variant and text-matching confirmation.
+ *
+ * The dialog is named by its title (`aria-labelledby`); `[slot='preview']`
+ * shows what the action affects below the message; `confirmLoading` keeps the
+ * dialog open with a busy confirm button while the action runs.
+ *
+ * @example
+ * ```html
+ * <lc-confirm-dialog
+ *   [open]="showConfirm()"
+ *   variant="destructive"
+ *   title="Delete project?"
+ *   message="This cannot be undone."
+ *   (confirmed)="onDelete()"
+ *   (cancelled)="showConfirm.set(false)"
+ * />
+ * ```
+ */
+export declare class ConfirmDialogComponent {
+  private static nextId;
+  /** Whether the dialog is open */
+  readonly open: import("@angular/core").InputSignal<boolean>;
+  /** Dialog variant */
+  readonly variant: import("@angular/core").InputSignal<ConfirmDialogVariant>;
+  /** Dialog title */
+  readonly title: import("@angular/core").InputSignal<string>;
+  /** Dialog message */
+  readonly message: import("@angular/core").InputSignal<string>;
+  /** Confirm button label */
+  readonly confirmLabel: import("@angular/core").InputSignal<string>;
+  /** Cancel button label */
+  readonly cancelLabel: import("@angular/core").InputSignal<string>;
+  /** Icon name (auto-set by variant if not provided) */
+  readonly icon: import("@angular/core").InputSignal<string | undefined>;
+  /** Require text match to enable confirm */
+  readonly requireText: import("@angular/core").InputSignal<RequireTextConfig | undefined>;
+  /** Accessible name of the close button in the header. */
+  readonly closeAriaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Shows a spinner on the confirm button and blocks a second confirm while
+   * the action runs; the app closes the dialog when it is done.
+   * @default false
+   */
+  readonly confirmLoading: import("@angular/core").InputSignal<boolean>;
+  /**
+   * Size of the confirm and cancel buttons: `md` (3.2) or `lg` (48.5 px, the
+   * 44 px touch target), or `sm`.
+   * @default 'md'
+   */
+  readonly buttonSize: import("@angular/core").InputSignal<ConfirmDialogButtonSize>;
+  /**
+   * Where the dialog sits (passed to `lc-modal`): `center` (3.2), `auto` (a
+   * bottom sheet below 640 px) or `sheet`.
+   * @default 'center'
+   */
+  readonly placement: import("@angular/core").InputSignal<ModalPlacement>;
+  /** Id of the title, which names the dialog. */
+  protected readonly titleId: string;
+  /** Emitted when user confirms */
+  readonly confirmed: import("@angular/core").OutputEmitterRef<void>;
+  /** Emitted when user cancels */
+  readonly cancelled: import("@angular/core").OutputEmitterRef<void>;
+  /** Internal text input value */
+  protected inputValue: import("@angular/core").WritableSignal<string>;
+  /** Resolved icon name */
+  protected resolvedIcon: import("@angular/core").Signal<string>;
+  /** Resolved icon color */
+  protected iconColor: import("@angular/core").Signal<"var(--color-error-default)" | "var(--color-warning-default)" | "var(--color-primary-600)">;
+  /** Confirm button variant */
+  protected confirmButtonVariant: import("@angular/core").Signal<"warning" | "danger" | "primary">;
+  /** Whether confirm is allowed (text match check) */
+  protected confirmAllowed: import("@angular/core").Signal<boolean>;
+  constructor();
+  /**
+   * Confirm via button click or Enter inside the require-text input.
+   * Enter is deliberately NOT handled on the whole dialog: the focus trap
+   * lands on the close/cancel buttons first, and Enter there must activate
+   * *that* button, never the (possibly destructive) confirm action.
+   */
+  protected onConfirm(): void;
+  protected onCancel(): void;
+  protected onModalClose(): void;
+  protected onInputChange(value: string | number): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmDialogComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmDialogComponent, "lc-confirm-dialog", never, {
+    "open": {
+      "alias": "open";
+      "required": false;
+      "isSignal": true;
+    };
+    "variant": {
+      "alias": "variant";
+      "required": false;
+      "isSignal": true;
+    };
+    "title": {
+      "alias": "title";
+      "required": true;
+      "isSignal": true;
+    };
+    "message": {
+      "alias": "message";
+      "required": true;
+      "isSignal": true;
+    };
+    "confirmLabel": {
+      "alias": "confirmLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "cancelLabel": {
+      "alias": "cancelLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "requireText": {
+      "alias": "requireText";
+      "required": false;
+      "isSignal": true;
+    };
+    "closeAriaLabel": {
+      "alias": "closeAriaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "confirmLoading": {
+      "alias": "confirmLoading";
+      "required": false;
+      "isSignal": true;
+    };
+    "buttonSize": {
+      "alias": "buttonSize";
+      "required": false;
+      "isSignal": true;
+    };
+    "placement": {
+      "alias": "placement";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "confirmed": "confirmed";
+    "cancelled": "cancelled";
+  }, never, ["[slot='preview']"], true, never>;
+}
+export interface ConfirmOptions {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: ConfirmDialogVariant;
+  icon?: string;
+  requireText?: RequireTextConfig;
+  /** Accessible name of the close button (3.3). */
+  closeAriaLabel?: string;
+  /** Size of both buttons (3.3): `lg` for a 44 px touch target. */
+  buttonSize?: ConfirmDialogButtonSize;
+  /** `center`, `auto` (a bottom sheet below 640 px) or `sheet` (3.3). */
+  placement?: ModalPlacement;
+}
+/**
+ * Imperative confirm dialog service.
+ *
+ * @example
+ * ```ts
+ * const ok = await this.confirmService.confirm({
+ *   title: 'Delete item?',
+ *   message: 'This cannot be undone.',
+ * });
+ * if (ok) { ... }
+ * ```
+ */
+export declare class ConfirmService {
+  private readonly appRef;
+  private readonly injector;
+  /**
+   * Show a confirmation dialog and return a promise that resolves
+   * to true (confirmed) or false (cancelled).
+   */
+  confirm(opts: ConfirmOptions): Promise<boolean>;
+  /**
+   * Show a destructive confirmation dialog.
+   * Shorthand for `confirm({ ...opts, variant: 'destructive' })`.
+   */
+  destructive(opts: Omit<ConfirmOptions, 'variant'>): Promise<boolean>;
+  /**
+   * Show a warning confirmation dialog.
+   * Shorthand for `confirm({ ...opts, variant: 'warning' })`.
+   */
+  warning(opts: Omit<ConfirmOptions, 'variant'>): Promise<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}

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

@@ -0,0 +1,47 @@
+import * as i0 from "@angular/core";
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'full';
+/**
+ * Container component for responsive max-width content layout.
+ *
+ * Features:
+ * - Max-width presets (sm, md, lg, xl, xxl, full)
+ * - Optional horizontal padding removal
+ * - Optional vertical padding
+ * - Centered content alignment
+ *
+ * All layout comes from the component's own stylesheet (no Tailwind
+ * utilities): `sm…xl` map onto the 640/768/1024/1280px screen scale, `xxl`
+ * caps at the `--lc-content-max-width` token (1536px) — the widest step
+ * before `full`, for data-dense pages that `xl` squeezes but `full` stretches
+ * across ultrawide displays. Padding follows the `--lc-density-padding-*`
+ * tokens and steps up at 640px / 1024px.
+ *
+ * @example
+ * ```html
+ * <lc-container size="lg">Content here</lc-container>
+ * ```
+ */
+export declare class ContainerComponent {
+  readonly size: import("@angular/core").InputSignal<ContainerSize>;
+  readonly noPadding: import("@angular/core").InputSignal<boolean>;
+  readonly paddingY: import("@angular/core").InputSignal<boolean>;
+  readonly classes: import("@angular/core").Signal<string>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ContainerComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ContainerComponent, "lc-container", never, {
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "noPadding": {
+      "alias": "noPadding";
+      "required": false;
+      "isSignal": true;
+    };
+    "paddingY": {
+      "alias": "paddingY";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}

package/types/lifecorner-angular-ui-kit-copy-field.d.ts

@@ -0,0 +1,89 @@
+import * as i0 from "@angular/core";
+/** `stacked`: the button below the value at full width (phones); `inline`: beside it. */
+export type CopyFieldLayout = 'stacked' | 'inline';
+/**
+ * A value to copy — an invitation link, a token, a command: the value
+ * read-only and wrapping (never clipped), a 48.5 px copy button, and one
+ * polite announcement after copying. If the clipboard refuses, the value is
+ * selected so the person can copy it by hand.
+ *
+ * @example
+ * ```html
+ * <lc-copy-field label="Einladungslink" [value]="link" copyLabel="Kopieren"
+ *                copiedLabel="Kopiert" copiedAnnouncement="Link kopiert" />
+ * ```
+ */
+export declare class CopyFieldComponent {
+  /** Label of the value (its accessible name). */
+  readonly label: import("@angular/core").InputSignal<string>;
+  /** The value to copy. */
+  readonly value: import("@angular/core").InputSignal<string>;
+  /** Help below the value. */
+  readonly helperText: import("@angular/core").InputSignal<string | undefined>;
+  /** `stacked` (default): button below at full width; `inline`: button beside the value. */
+  readonly layout: import("@angular/core").InputSignal<CopyFieldLayout>;
+  /** Show the clipboard (and, after copying, check) icon in the button. */
+  readonly showIcon: import("@angular/core").InputSignal<boolean>;
+  /** Button label. */
+  readonly copyLabel: import("@angular/core").InputSignal<string>;
+  /** Button label for two seconds after copying. */
+  readonly copiedLabel: import("@angular/core").InputSignal<string>;
+  /** Spoken once after copying (polite live region). */
+  readonly copiedAnnouncement: import("@angular/core").InputSignal<string>;
+  /** Emitted with the value after it was copied. */
+  readonly copied: import("@angular/core").OutputEmitterRef<string>;
+  /** Emitted when the clipboard refused; the value is then selected for copying by hand. */
+  readonly copyFailed: import("@angular/core").OutputEmitterRef<void>;
+  protected readonly isCopied: import("@angular/core").WritableSignal<boolean>;
+  private readonly field;
+  private timer;
+  constructor();
+  /** Copies the value; on refusal selects it instead. */
+  copy(): Promise<void>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<CopyFieldComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<CopyFieldComponent, "lc-copy-field", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "helperText": {
+      "alias": "helperText";
+      "required": false;
+      "isSignal": true;
+    };
+    "layout": {
+      "alias": "layout";
+      "required": false;
+      "isSignal": true;
+    };
+    "showIcon": {
+      "alias": "showIcon";
+      "required": false;
+      "isSignal": true;
+    };
+    "copyLabel": {
+      "alias": "copyLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "copiedLabel": {
+      "alias": "copiedLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "copiedAnnouncement": {
+      "alias": "copiedAnnouncement";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "copied": "copied";
+    "copyFailed": "copyFailed";
+  }, never, never, true, never>;
+}