@koobiq/components 20.4.1 → 21.0.0

package/types/koobiq-components-dl.d.ts

@@ -0,0 +1,235 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Provider } from '@angular/core';
+import { KbqResizerDirection, KbqResizerSizeChangeEvent } from '@koobiq/components/resizer';
+import * as i1 from '@koobiq/components/core';
+
+/** Supported alignment values for description list items. */
+type KbqDlAlign = 'start' | 'center' | 'end';
+/** Configuration for {@link KbqDl}. Each input of a list overrides its option. */
+type KbqDlOptions = {
+    /** Host width in pixels at or below which a list switches to the vertical layout. */
+    verticalBreakpoint: number;
+    /** Forces the vertical layout; `null` lets a list decide based on `verticalBreakpoint`. */
+    vertical: boolean | null;
+    /** Whether a list uses the wide two-column layout. */
+    wide: boolean;
+    /** Whether the `kbq-dt` area can be resized by dragging the separator. */
+    resizable: boolean;
+    /** Width of the `kbq-dt` area in pixels; `null` keeps the default column ratio. */
+    dtWidth: number | null;
+    /** Minimum width of the `kbq-dt` area in pixels; defaults to the rendered term width. */
+    dtMinWidth?: number;
+    /** Minimum width retained for the `kbq-dd` area in pixels; defaults to the rendered term width. */
+    ddMinWidth?: number;
+    /** Vertical alignment of `kbq-dt` and `kbq-dd` items. */
+    verticalAlign: KbqDlAlign;
+    /** Horizontal alignment of `kbq-dt` and `kbq-dd` items. */
+    horizontalAlign: KbqDlAlign;
+};
+/** Injection token holding the current {@link KbqDlOptions}. */
+declare const KBQ_DL_OPTIONS: InjectionToken<KbqDlOptions>;
+/**
+ * Overrides the default description list options within the given injector scope. The options it leaves out keep the
+ * values of the parent injector.
+ */
+declare function kbqDlOptionsProvider(options: Partial<KbqDlOptions>): Provider;
+/** Term of a description list. */
+declare class KbqDt {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqDt, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqDt, "kbq-dt", never, {}, {}, never, ["*"], true, never>;
+}
+/** Description of the term before it. */
+declare class KbqDd {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqDd, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqDd, "kbq-dd", never, {}, {}, never, ["*"], true, never>;
+}
+/** Description list: `kbq-dt` terms paired with `kbq-dd` descriptions in an adaptive, horizontal or vertical layout. */
+declare class KbqDl {
+    private readonly options;
+    /**
+     * Host width in pixels at or below which the list auto-switches to the vertical layout.
+     * Defaults to the app-wide {@link KBQ_DL_OPTIONS}.
+     */
+    readonly verticalBreakpoint: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Whether the list uses the wide two-column layout. Defaults to the app-wide {@link KBQ_DL_OPTIONS}. */
+    readonly wide: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the `kbq-dt` area can be resized by dragging the separator.
+     * Defaults to the app-wide {@link KBQ_DL_OPTIONS}.
+     */
+    readonly resizable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Backing input of `dtWidth`. Public because a signal input cannot be `protected` without breaking
+     * the binding for a `strictTemplates` consumer.
+     *
+     * @docs-private
+     */
+    readonly dtWidthInput: _angular_core.InputSignalWithTransform<number | null, unknown>;
+    /**
+     * Width of the `kbq-dt` area in pixels; `null` restores the default column ratio.
+     * Defaults to the app-wide {@link KBQ_DL_OPTIONS}.
+     *
+     * Writable: a drag or a double-click on the separator sets it, and `dtWidthChange` reports that back.
+     * `model()` would have been the shorter form, but it takes no `transform`, so an uncoerced attribute
+     * reached the layout arithmetic as a string and skipped the clamp against `dtMinWidth`.
+     */
+    readonly dtWidth: _angular_core.WritableSignal<number | null>;
+    /** Emits when the component itself changes `dtWidth`; completes the `[(dtWidth)]` two-way binding. */
+    readonly dtWidthChange: _angular_core.OutputEmitterRef<number | null>;
+    /**
+     * Minimum width of the `kbq-dt` area in pixels; defaults to the app-wide {@link KBQ_DL_OPTIONS}, then to the
+     * rendered term width.
+     */
+    readonly dtMinWidth: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /**
+     * Minimum width retained for the `kbq-dd` area in pixels; defaults to the app-wide {@link KBQ_DL_OPTIONS}, then
+     * to the rendered term width.
+     */
+    readonly ddMinWidth: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
+    /** Accessible name of the column resize separator; falls back to the localized default when omitted. */
+    readonly resizerAriaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Vertical alignment of `kbq-dt` and `kbq-dd` items. Defaults to the app-wide {@link KBQ_DL_OPTIONS}. */
+    readonly verticalAlign: _angular_core.InputSignal<KbqDlAlign>;
+    /** Horizontal alignment of `kbq-dt` and `kbq-dd` items. Defaults to the app-wide {@link KBQ_DL_OPTIONS}. */
+    readonly horizontalAlign: _angular_core.InputSignal<KbqDlAlign>;
+    /**
+     * Forces the vertical layout; `null` lets the list decide based on `verticalBreakpoint`.
+     * Defaults to the app-wide {@link KBQ_DL_OPTIONS}.
+     */
+    readonly vertical: _angular_core.InputSignalWithTransform<boolean | null, unknown>;
+    /** @docs-private */
+    protected readonly resizeDirection: _angular_core.Signal<KbqResizerDirection>;
+    /** Host width as last measured; `null` until the list first has a box to measure. */
+    private readonly hostWidth;
+    /**
+     * Auto-detected vertical layout. Derived from the measurement rather than written alongside it, so it
+     * cannot go stale when `verticalBreakpoint` changes, and `null` means "not measured yet" rather than
+     * doubling as "skipped the write".
+     */
+    private readonly autoVertical;
+    /** Effective vertical layout, combining the explicit `vertical` input and the auto-detection. @docs-private */
+    protected readonly isVertical: _angular_core.Signal<boolean>;
+    /** Whether the column resize separator is currently rendered. @docs-private */
+    protected readonly resizerVisible: _angular_core.Signal<boolean>;
+    /** Whether `dtWidth` overrides the default column ratio. @docs-private */
+    protected readonly resized: _angular_core.Signal<boolean>;
+    /** Rendered term width used as the default minimum for both areas. */
+    private readonly measuredDtWidth;
+    /** Effective minimum width of the `kbq-dt` area. */
+    private readonly resolvedDtMinWidth;
+    /** Effective minimum width of the `kbq-dd` area. */
+    private readonly resolvedDdMinWidth;
+    /** Minimum `kbq-dt` width, clamped to a non-negative value. @docs-private */
+    protected readonly normalizedDtMinWidth: _angular_core.Signal<number>;
+    /**
+     * Host width the two areas share, without the gap between them; `null` until measured. The geometry is read at
+     * the moments it can change, so change detection never forces a layout.
+     */
+    private readonly availableWidth;
+    /** Rendered width of the resize track, which spans the `kbq-dt` area. */
+    private readonly trackWidth;
+    /** Largest `kbq-dt` width that still leaves the `kbq-dd` area its minimum. @docs-private */
+    protected readonly maxDtWidth: _angular_core.Signal<number>;
+    /**
+     * Current `kbq-dt` width, as the separator reports it: within `aria-valuemin` and `aria-valuemax`
+     * even before the host is measured and the effect below clamps a bound `dtWidth`.
+     *
+     * @docs-private
+     */
+    protected readonly currentDtWidth: _angular_core.Signal<number>;
+    /**
+     * Cursor shown over the separator: it advertises not just that the column is resizable but the
+     * direction still available — grow-only at the minimum width, shrink-only at the maximum, `default` when there is
+     * no room to move the border at all.
+     *
+     * @docs-private
+     */
+    protected readonly resizeCursor: _angular_core.Signal<"col-resize" | "default" | "e-resize" | "w-resize">;
+    private readonly keyboardResizeStep;
+    private readonly nativeElement;
+    private readonly window;
+    private readonly destroyRef;
+    private readonly resizeObserver;
+    private readonly directionality;
+    private readonly focusMonitor;
+    private readonly a11yLocaleConfiguration;
+    private readonly resizeTrack;
+    private readonly resizeHandle;
+    private readonly terms;
+    /** Resolved accessible name of the resize separator. @docs-private */
+    protected readonly resolvedResizerAriaLabel: _angular_core.Signal<string>;
+    constructor();
+    /** Captures the rendered width of the term column, used as the default minimum when no widths are provided. */
+    private measureDtWidth;
+    /** Reads the geometry the separator is bounded by. Browser-only: called after a render or on user interaction. */
+    private measureResizeBounds;
+    /** @docs-private */
+    protected handleDtResize({ width }: KbqResizerSizeChangeEvent): void;
+    /**
+     * Demotes the separator's focus origin to the pointer when a mouse drag starts, so the keyboard-focus frame
+     * hides for the whole drag and does not linger afterwards. Keyboard focus keeps the frame as usual.
+     *
+     * @docs-private
+     */
+    protected handleResizeStart(): void;
+    /** @docs-private */
+    protected handleResizeKeydown(event: KeyboardEvent): void;
+    /** @docs-private */
+    protected handleResizeDblClick(event: MouseEvent): void;
+    private updateLayout;
+    private setDtWidth;
+    private constrainDtWidth;
+    /**
+     * The only way the component writes `dtWidth`. `linkedSignal` does not emit on its own the way
+     * `model()` did, so the write and the notification are kept together rather than at each call site.
+     */
+    private writeDtWidth;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqDl, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqDl, "kbq-dl", never, { "verticalBreakpoint": { "alias": "verticalBreakpoint"; "required": false; "isSignal": true; }; "wide": { "alias": "wide"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "dtWidthInput": { "alias": "dtWidth"; "required": false; "isSignal": true; }; "dtMinWidth": { "alias": "dtMinWidth"; "required": false; "isSignal": true; }; "ddMinWidth": { "alias": "ddMinWidth"; "required": false; "isSignal": true; }; "resizerAriaLabel": { "alias": "resizerAriaLabel"; "required": false; "isSignal": true; }; "verticalAlign": { "alias": "verticalAlign"; "required": false; "isSignal": true; }; "horizontalAlign": { "alias": "horizontalAlign"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; }, { "dtWidthChange": "dtWidthChange"; }, ["terms"], ["*"], true, [{ directive: typeof i1.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
+}
+/**
+ * @deprecated Use `KbqDl` instead. Will be removed in 22.0.0.
+ *
+ * @docs-private
+ */
+declare const KbqDlComponent: typeof KbqDl;
+/**
+ * @deprecated Use `KbqDl` instead. Will be removed in 22.0.0.
+ *
+ * @docs-private
+ */
+type KbqDlComponent = KbqDl;
+/**
+ * @deprecated Use `KbqDt` instead. Will be removed in 22.0.0.
+ *
+ * @docs-private
+ */
+declare const KbqDtComponent: typeof KbqDt;
+/**
+ * @deprecated Use `KbqDt` instead. Will be removed in 22.0.0.
+ *
+ * @docs-private
+ */
+type KbqDtComponent = KbqDt;
+/**
+ * @deprecated Use `KbqDd` instead. Will be removed in 22.0.0.
+ *
+ * @docs-private
+ */
+declare const KbqDdComponent: typeof KbqDd;
+/**
+ * @deprecated Use `KbqDd` instead. Will be removed in 22.0.0.
+ *
+ * @docs-private
+ */
+type KbqDdComponent = KbqDd;
+
+/** @docs-private */
+declare class KbqDlModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqDlModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqDlModule, never, [typeof KbqDl, typeof KbqDt, typeof KbqDd], [typeof KbqDl, typeof KbqDt, typeof KbqDd]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqDlModule>;
+}
+
+export { KBQ_DL_OPTIONS, KbqDd, KbqDdComponent, KbqDl, KbqDlComponent, KbqDlModule, KbqDt, KbqDtComponent, kbqDlOptionsProvider };
+export type { KbqDlAlign, KbqDlOptions };