@ngb-bootstrap/core 0.0.0 → 0.1.0-next.0

package/types/ngb-bootstrap-core-cdk.d.ts

@@ -0,0 +1,165 @@
+import { ConnectedPosition, OverlayRef } from "@angular/cdk/overlay";
+import { ComponentPortal, TemplatePortal } from "@angular/cdk/portal";
+import * as i0 from "@angular/core";
+import { AfterContentChecked, Injector, Provider, Type } from "@angular/core";
+import { Observable } from "rxjs";
+import { ControlValueAccessor } from "@angular/forms";
+import { NGB_DEFAULT_I18N, NGB_I18N, NgbI18n, NgbI18nOverrides, provideNgbI18n } from "@ngb-bootstrap/core";
+/** Where the panel sits relative to its anchor, using Bootstrap's placement names. */
+export type NgbPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'start' | 'start-top' | 'start-bottom' | 'end' | 'end-top' | 'end-bottom';
+/**
+ * Maps a placement to CDK connected positions: the placement first, then its opposite side as
+ * a fallback (the CDK picks the first one that fits). `offset` is the gap in px.
+ *
+ * ```ts
+ * ngbPositions('bottom-start', 8);
+ * ```
+ */
+export declare function ngbPositions(placement: NgbPlacement, offset?: number): ConnectedPosition[];
+export interface NgbAnchoredOverlayConfig {
+  /** Default `bottom`. */
+  placement?: NgbPlacement;
+  /** Gap in px between anchor and panel. Default 0. */
+  offset?: number;
+  /** Close on Escape. Default true. */
+  closeOnEscape?: boolean;
+  /** Close on a pointer press outside the panel and anchor. Default true. */
+  closeOnOutsideClick?: boolean;
+  /** Extra classes for the CDK pane. */
+  panelClass?: string | string[];
+  /** Injector for the created component or template view. */
+  injector?: Injector;
+}
+/** Handle to an open anchored panel. */
+export interface NgbAnchoredOverlayRef {
+  /** The underlying CDK overlay, for anything not covered here. */
+  readonly overlayRef: OverlayRef;
+  /** Emits once when the panel is closed (by the user or by `close()`). */
+  readonly closed: Observable<void>;
+  /** Closes and disposes the panel. Safe to call twice. */
+  close(): void;
+}
+/**
+ * Opens a component or template next to an anchor element using the CDK's flexible connected
+ * position strategy. It adds Bootstrap placement names, a flip fallback, scroll repositioning and
+ * Escape / outside-click closing; anything else is available through `overlayRef`.
+ *
+ * ```ts
+ * const ref = inject(NgbAnchoredOverlay).open(button, new ComponentPortal(Tip), {
+ *   placement: 'top',
+ *   offset: 8,
+ * });
+ * ref.closed.subscribe(() => (this.open = false));
+ * ```
+ */
+export declare class NgbAnchoredOverlay {
+  private readonly overlay;
+  open(anchor: HTMLElement, content: ComponentPortal<unknown> | TemplatePortal<unknown>, config?: NgbAnchoredOverlayConfig): NgbAnchoredOverlayRef;
+  static ɵfac: i0.ɵɵFactoryDeclaration<NgbAnchoredOverlay, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * App-scoped unique id source. Counters live in this root service rather than at module level, so
+ * every application (and every SSR request) starts from zero. The server and the browser then
+ * generate the same ids in the same order, which keeps hydration from mismatching on `id`,
+ * `for` and `aria-*` attributes.
+ */
+export declare class NgbIdGenerator {
+  private readonly counters;
+  /** Returns `${prefix}-${n}`, counting separately per prefix. */
+  next(prefix: string): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<NgbIdGenerator, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * Creates a unique id such as `ngb-tooltip-1`. Call it in an injection context, typically a field
+ * initialiser, so ids are created in the same order on server and client.
+ *
+ * ```ts
+ * protected readonly id = ngbId('ngb-tooltip');
+ * ```
+ */
+export declare function ngbId(prefix?: string): string;
+/**
+ * Base for form controls. It implements `ControlValueAccessor` on top of signals, so a control
+ * only needs a template that reads `value()` / `isDisabled()` and calls `setValue()` and
+ * `markTouched()`. It works with `ngModel`, reactive forms and plain `[(value)]` binding.
+ *
+ * ```ts
+ * @Component({
+ *   selector: 'ngb-switch',
+ *   providers: [provideNgbValueAccessor(() => NgbSwitch)],
+ *   template: `<input type="checkbox" role="switch" [checked]="value()" [disabled]="isDisabled()"
+ *     (change)="setValue($any($event.target).checked)" (blur)="markTouched()" />`,
+ * })
+ * export class NgbSwitch extends NgbValueAccessor<boolean> {}
+ * ```
+ *
+ * `writeValue` also emits `valueChange`, because `model()` always does; `onChange` fires only
+ * for changes made through `setValue`. `isInvalid()` follows the form control (invalid and
+ * touched), like `ngbInput`, unless the `invalid` input forces it.
+ */
+export declare abstract class NgbValueAccessor<T> implements ControlValueAccessor, AfterContentChecked {
+  private readonly injector;
+  /** Current value; two-way bindable with `[(value)]`. */
+  readonly value: import("@angular/core").ModelSignal<T | null>;
+  /** Disabled through the `disabled` input. Forms can also disable the control. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  private readonly formDisabled;
+  /** True when disabled by the input or by the form control. */
+  readonly isDisabled: import("@angular/core").Signal<boolean>;
+  /**
+   * Forces the invalid state on or off, for errors the form does not know about, such as a server
+   * response. By default the control is invalid when its form control is invalid and touched.
+   */
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+  private readonly touchedInvalid;
+  /** True while the control shows its invalid state (`.is-invalid`, `aria-invalid`). */
+  readonly isInvalid: import("@angular/core").Signal<boolean>;
+  private ngControl?;
+  private watched;
+  private subscription?;
+  private onChange;
+  private onTouched;
+  constructor();
+  ngAfterContentChecked(): void;
+  /** Re-reads the form control's state. Runs on every change detection pass and on its events. */
+  private syncControl;
+  /** Call from the template when the user changes the value. */
+  setValue(value: T | null): void;
+  /** Call from the template on blur. */
+  markTouched(): void;
+  writeValue(value: T | null): void;
+  registerOnChange(fn: (value: T | null) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(isDisabled: boolean): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<NgbValueAccessor<any>, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<NgbValueAccessor<any>, never, never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+  }, never, never, true, never>;
+}
+/**
+ * Provider that registers a component as an `NG_VALUE_ACCESSOR`.
+ *
+ * ```ts
+ * providers: [provideNgbValueAccessor(() => NgbSwitch)]
+ * ```
+ */
+export declare function provideNgbValueAccessor(type: () => Type<unknown>): Provider;
+export { NGB_DEFAULT_I18N, NGB_I18N, type NgbI18n, type NgbI18nOverrides, provideNgbI18n };

package/types/ngb-bootstrap-core-checkbox.d.ts

@@ -0,0 +1,53 @@
+import { NgbThemeColor } from "@ngb-bootstrap/core";
+import { NgbValueAccessor } from "@ngb-bootstrap/core/cdk";
+import * as i0 from "@angular/core";
+export type NgbCheckSize = 'sm' | 'md' | 'lg';
+/**
+ * Checkbox built on Bootstrap 6 `.check` over a native `<input type="checkbox">`. The projected
+ * content is the label. The model is `value` (`true` / `false`), the same name every ngb form
+ * control uses, so `[(value)]`, `[(ngModel)]` and `formControlName` all work.
+ *
+ * ```html
+ * <ngb-checkbox [(value)]="accepted" hint="You can change this later.">Accept the terms</ngb-checkbox>
+ * <ngb-checkbox formControlName="all" [indeterminate]="some()">Select all</ngb-checkbox>
+ * ```
+ */
+export declare class NgbCheckbox extends NgbValueAccessor<boolean> {
+  protected readonly id: string;
+  protected readonly hintId: string;
+  /** Mixed state, shown with a dash. A user toggle clears it. Two-way bindable. */
+  readonly indeterminate: import("@angular/core").ModelSignal<boolean>;
+  /** Description shown under the label and linked with `aria-describedby`. */
+  readonly hint: import("@angular/core").InputSignal<string | undefined>;
+  /** Theme colour (Bootstrap `.theme-*`). Defaults to the control colour. */
+  readonly color: import("@angular/core").InputSignal<NgbThemeColor | undefined>;
+  /** `sm`, `md` (default) or `lg`. */
+  readonly size: import("@angular/core").InputSignal<NgbCheckSize>;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  protected toggle(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<NgbCheckbox, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<NgbCheckbox, "ngb-checkbox", never, {
+    "indeterminate": {
+      "alias": "indeterminate";
+      "required": false;
+      "isSignal": true;
+    };
+    "hint": {
+      "alias": "hint";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "indeterminate": "indeterminateChange";
+  }, never, ["*"], true, never>;
+}

package/types/ngb-bootstrap-core-chips.d.ts

@@ -0,0 +1,170 @@
+import * as i0 from "@angular/core";
+import { InjectionToken, Signal } from "@angular/core";
+import { NgbThemeColor } from "@ngb-bootstrap/core";
+import { NgbIconDefinition } from "@ngb-bootstrap/icons";
+import { FocusKeyManager } from "@angular/cdk/a11y";
+import { NgbValueAccessor } from "@ngb-bootstrap/core/cdk";
+/** What a chip needs from the `ngb-chip-group` it sits in. Implemented by `NgbChipGroup`. */
+export interface NgbChipGroupRef {
+  isSelected(value: unknown): boolean;
+  toggle(value: unknown): void;
+  /** True for the one chip that is in the tab order (roving tabindex). */
+  isTabbable(chip: unknown): boolean;
+  /** Called when a chip receives focus, so arrow keys continue from it. */
+  activate(chip: unknown): void;
+  readonly isDisabled: Signal<boolean>;
+}
+/** Lets chips find their group without importing it, which would be circular. */
+export declare const NGB_CHIP_GROUP: InjectionToken<NgbChipGroupRef>;
+/**
+ * Compact label, built on Bootstrap 6 `.chip`. A chip is static by default; make it `selectable`
+ * to toggle it (`aria-pressed`) or `removable` to add a dismiss button that emits `removed`.
+ *
+ * ```html
+ * <ngb-chip color="success" [icon]="ngbIconCheck">Done</ngb-chip>
+ * <ngb-chip selectable [(selected)]="on">Filter</ngb-chip>
+ * <ngb-chip removable (removed)="remove(tag)">{{ tag }}</ngb-chip>
+ * ```
+ *
+ * Inside an `ngb-chip-group` the chip's `value` is what the group selects. A selectable chip is a
+ * focusable toggle; its dismiss button then leaves the tab order and Delete or Backspace removes
+ * the chip instead.
+ */
+export declare class NgbChip {
+  private readonly el;
+  private readonly i18n;
+  private readonly group;
+  private readonly dismiss;
+  protected readonly closeIcon: NgbIconDefinition;
+  /** Theme colour (Bootstrap `.theme-*`). Defaults to Bootstrap's neutral chip. */
+  readonly color: import("@angular/core").InputSignal<NgbThemeColor | undefined>;
+  /** Leading icon from `@ngb-bootstrap/icons`. */
+  readonly icon: import("@angular/core").InputSignal<NgbIconDefinition | undefined>;
+  /** Makes the chip a toggle button with `aria-pressed`. */
+  readonly selectable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Selected state of a selectable chip outside a group; two-way bindable. */
+  readonly selected: import("@angular/core").ModelSignal<boolean>;
+  /** What the surrounding `ngb-chip-group` selects when this chip is toggled. */
+  readonly value: import("@angular/core").InputSignal<unknown>;
+  /** Adds a dismiss button. */
+  readonly removable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Disables the chip and its dismiss button. */
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /**
+   * Text used in the dismiss button's name ("Remove {label}"). Defaults to the chip's text.
+   * Set it when the content isn't plain text.
+   */
+  readonly label: import("@angular/core").InputSignal<string | undefined>;
+  /** Emits when the dismiss button is pressed, or on Delete / Backspace in a selectable chip. */
+  readonly removed: import("@angular/core").OutputEmitterRef<void>;
+  /** True when disabled by the input or by its group. */
+  readonly isDisabled: Signal<boolean>;
+  protected readonly isSelected: Signal<boolean>;
+  protected readonly classes: Signal<string>;
+  protected readonly tabIndex: Signal<-1 | 0 | null>;
+  /** Accessible name of the dismiss button. Reads the chip's text when `label` isn't set. */
+  protected removeLabel(): string;
+  private textLabel;
+  /** Focuses the chip, or its dismiss button if it isn't selectable. Used by the group's key manager. */
+  focus(): void;
+  protected onClick(): void;
+  protected onKeydown(event: KeyboardEvent): void;
+  protected onDismiss(event: Event): void;
+  private toggle;
+  private remove;
+  /**
+   * The chip is about to leave the DOM: hand focus to the next chip, else the previous one. Chips
+   * may sit directly next to each other or each inside a wrapper such as a grid column.
+   */
+  private moveFocusToNeighbour;
+  static ɵfac: i0.ɵɵFactoryDeclaration<NgbChip, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<NgbChip, "ngb-chip", never, {
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectable": {
+      "alias": "selectable";
+      "required": false;
+      "isSignal": true;
+    };
+    "selected": {
+      "alias": "selected";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "removable": {
+      "alias": "removable";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "selected": "selectedChange";
+    "removed": "removed";
+  }, never, ["*"], true, never>;
+}
+/**
+ * Group of chips. It is a single tab stop: arrow keys, Home and End move between the selectable
+ * chips and Enter or Space toggles one. The value is the `value` of the selected chip, or an array
+ * of them with `multiple`. Works with `[(value)]`, `ngModel` and reactive forms.
+ *
+ * ```html
+ * <ngb-chip-group label="Topics" multiple [(value)]="topics">
+ *   <ngb-chip selectable value="a11y">Accessibility</ngb-chip>
+ *   <ngb-chip selectable value="i18n">Internationalisation</ngb-chip>
+ * </ngb-chip-group>
+ * ```
+ */
+export declare class NgbChipGroup extends NgbValueAccessor<unknown> implements NgbChipGroupRef {
+  /** Accessible name of the group. */
+  readonly label: import("@angular/core").InputSignal<string | undefined>;
+  /** Allows several chips to be selected; the value is then an array. */
+  readonly multiple: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  private readonly chips;
+  private readonly options;
+  private readonly focusable;
+  private readonly focusableOptions;
+  private readonly active;
+  protected readonly keyManager: FocusKeyManager<unknown>;
+  /** The chip in the tab order: the last focused one, else the first selected, else the first. */
+  private readonly tabbable;
+  isSelected(value: unknown): boolean;
+  toggle(value: unknown): void;
+  isTabbable(chip: unknown): boolean;
+  activate(chip: unknown): void;
+  private option;
+  static ɵfac: i0.ɵɵFactoryDeclaration<NgbChipGroup, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<NgbChipGroup, "ngb-chip-group", never, {
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+    "multiple": {
+      "alias": "multiple";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, ["chips"], ["*"], true, never>;
+}

package/types/ngb-bootstrap-core-floating-label.d.ts

@@ -0,0 +1,22 @@
+import { NgbField } from "@ngb-bootstrap/core/input";
+import * as i0 from "@angular/core";
+/**
+ * Floating label built on Bootstrap 6 `.form-floating`. The label sits inside the control and
+ * moves up once the control has focus or a value. It works with `<input>`, `<textarea>` and
+ * `<select>`: put an `ngbInput` inside.
+ *
+ * Bootstrap detects a value with `:placeholder-shown`, so the control needs a `placeholder`. The
+ * input gets a single space by default; set `placeholder` to show a hint once it has focus.
+ *
+ * ```html
+ * <ngb-floating-label label="Email" hint="We never share it." error="Enter a valid email.">
+ *   <input ngbInput type="email" formControlName="email" />
+ * </ngb-floating-label>
+ * ```
+ */
+export declare class NgbFloatingLabel extends NgbField {
+  /** Default placeholder handed to the input: a space, so `:placeholder-shown` works. */
+  readonly placeholder = " ";
+  static ɵfac: i0.ɵɵFactoryDeclaration<NgbFloatingLabel, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<NgbFloatingLabel, "ngb-floating-label", never, {}, {}, never, ["*"], true, never>;
+}

package/types/ngb-bootstrap-core-footer.d.ts

@@ -0,0 +1,16 @@
+import * as i0 from "@angular/core";
+/**
+ * Page footer in the Taiga UI docs style: small secondary text, laid out as a wrapping row. Inside
+ * `<ngb-layout-content>` it is its own panel below the content; elsewhere it has a top divider.
+ *
+ * ```html
+ * <ngb-footer>
+ *   <span>© 2026 My app</span>
+ *   <nav aria-label="Footer"><a href="…">GitHub</a></nav>
+ * </ngb-footer>
+ * ```
+ */
+export declare class NgbFooter {
+  static ɵfac: i0.ɵɵFactoryDeclaration<NgbFooter, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<NgbFooter, "ngb-footer", never, {}, {}, never, ["*"], true, never>;
+}

package/types/ngb-bootstrap-core-icon.d.ts

@@ -0,0 +1,99 @@
+import { SafeHtml } from "@angular/platform-browser";
+import { NgbIconDefinition, NgbIconName, NgbIconTheme } from "@ngb-bootstrap/icons";
+import * as i0 from "@angular/core";
+import { EnvironmentProviders, InjectionToken } from "@angular/core";
+/**
+ * SVG icon from `@ngb-bootstrap/icons` (IconPark) or the app's own registered SVGs.
+ * Decorative by default (`aria-hidden`); set `label` when the icon carries meaning on its own.
+ *
+ * ```html
+ * <ngb-icon name="home" theme="two-tone" size="1.25rem" />
+ * <ngb-icon [icon]="ngbIconSearch" label="Search" />
+ * ```
+ */
+export declare class NgbIcon {
+  private readonly registry;
+  private readonly config;
+  private readonly sanitizer;
+  private readonly id;
+  /** Name of a registered icon (see `provideNgbIcons`). */
+  readonly name: import("@angular/core").InputSignal<NgbIconName | (string & {}) | undefined>;
+  /** Icon definition to render directly, without registering it. Takes precedence over `name`. */
+  readonly icon: import("@angular/core").InputSignal<NgbIconDefinition | undefined>;
+  /** `outline` (default), `filled`, `two-tone` or `multi-color`. */
+  readonly theme: import("@angular/core").InputSignal<NgbIconTheme>;
+  /** Any CSS length, e.g. `1.5rem`. Defaults to `1em`, the surrounding font size. */
+  readonly size: import("@angular/core").InputSignal<string | undefined>;
+  /** Stroke width on IconPark's 48-unit grid. Defaults to 4. */
+  readonly strokeWidth: import("@angular/core").InputSignal<number | undefined>;
+  /** Accessible name. Without it the icon is hidden from assistive technology. */
+  readonly label: import("@angular/core").InputSignal<string | undefined>;
+  private readonly definition;
+  protected readonly classes: import("@angular/core").Signal<string>;
+  protected readonly svg: import("@angular/core").Signal<SafeHtml>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<NgbIcon, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<NgbIcon, "ngb-icon", never, {
+    "name": {
+      "alias": "name";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "theme": {
+      "alias": "theme";
+      "required": false;
+      "isSignal": true;
+    };
+    "size": {
+      "alias": "size";
+      "required": false;
+      "isSignal": true;
+    };
+    "strokeWidth": {
+      "alias": "strokeWidth";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
+/** Defaults for every `<ngb-icon>`. */
+export interface NgbIconConfig {
+  /** IconPark theme. */
+  theme: NgbIconTheme;
+  /** Mirror icons IconPark marks as directional when they sit in a right-to-left layout. */
+  flipInRtl: boolean;
+}
+export declare const NGB_ICON_DEFAULT_CONFIG: NgbIconConfig;
+export declare const NGB_ICON_CONFIG: InjectionToken<NgbIconConfig>;
+/** Overrides `<ngb-icon>` defaults. */
+export declare function provideNgbIconConfig(config: Partial<NgbIconConfig>): EnvironmentProviders;
+/** Icons that `<ngb-icon name="…">` can render, keyed by name. */
+export declare class NgbIconRegistry {
+  private readonly icons;
+  private readonly warned;
+  /** Adds icons. A later registration with the same name replaces the earlier one. */
+  register(icons: readonly NgbIconDefinition[]): void;
+  /** Looks up an icon. Unknown names return `undefined` and log a warning in dev mode. */
+  get(name: string): NgbIconDefinition | undefined;
+  static ɵfac: i0.ɵɵFactoryDeclaration<NgbIconRegistry, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * Registers the icons an app (or a lazy route) uses with `<ngb-icon name="…">`.
+ * Accepts IconPark icons from `@ngb-bootstrap/icons` and an app's own `{ name, svg }` definitions.
+ *
+ * ```ts
+ * import { ngbIconHome, ngbIconSearch } from '@ngb-bootstrap/icons';
+ * bootstrapApplication(App, { providers: [provideNgbIcons([ngbIconHome, ngbIconSearch])] });
+ * ```
+ */
+export declare function provideNgbIcons(icons: readonly NgbIconDefinition[]): EnvironmentProviders;