@tolle_/tolle-ui 18.2.29 → 18.2.30

package/lib/date-time-picker.component.d.ts

@@ -0,0 +1,119 @@
+import { EventEmitter, ElementRef, ChangeDetectorRef, OnChanges, OnDestroy } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { type VariantProps } from 'class-variance-authority';
+import { cn } from './utils/cn';
+import { TimeColumnsComponent, TimeParts } from './time-picker.component';
+import * as i0 from "@angular/core";
+declare const dateTimePickerTriggerVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Variant props for the date-time picker trigger. */
+export type DateTimePickerProps = VariantProps<typeof dateTimePickerTriggerVariants>;
+/**
+ * One control for a date *and* a time: `tolle-calendar` on the left, the
+ * `tolle-time-columns` strip on the right, in a single floating panel with a
+ * Clear / Done footer.
+ *
+ * The value is a `Date`, because a date-time genuinely is a moment. Changing
+ * the date preserves the chosen time and changing the time preserves the
+ * chosen date — the two halves are only ever recombined, never reset.
+ *
+ * Implements `ControlValueAccessor`, so it works with `ngModel` and reactive
+ * forms. Use `tolle-date-picker` for a date alone and `tolle-time-picker` for a
+ * time alone.
+ * @new
+ */
+export declare class DateTimePickerComponent implements ControlValueAccessor, OnChanges, OnDestroy {
+    private cdr;
+    /** Text shown on the trigger when nothing is selected. @default 'Select date and time' */
+    placeholder: string;
+    /** Disables the control. @default false */
+    disabled: boolean;
+    /** Renders a 12-hour face with an AM/PM column. @default false */
+    use12Hours: boolean;
+    /** Adds a seconds column. @default false */
+    showSeconds: boolean;
+    /** Interval between minute entries, in minutes. @default 1 */
+    minuteStep: number;
+    /** Earliest selectable moment; earlier days and times are disabled. */
+    min?: Date;
+    /** Latest selectable moment; later days and times are disabled. */
+    max?: Date;
+    /** date-fns pattern used to render the value on the trigger. @default 'MMM d, yyyy h:mm a' */
+    displayFormat: string;
+    /** Height and text size of the trigger and entries. @default 'default' */
+    size: DateTimePickerProps['size'];
+    /** Applies the destructive border and focus ring. @default false */
+    invalid: boolean;
+    /** Accessible name when there is no associated visible label. @default '' */
+    ariaLabel: string;
+    /** Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the chosen moment, or `null` when the value is cleared. */
+    valueChange: EventEmitter<Date | null>;
+    /** Emitted when the panel opens. */
+    opened: EventEmitter<void>;
+    /** Emitted when the panel closes. */
+    closed: EventEmitter<void>;
+    triggerEl?: ElementRef<HTMLElement>;
+    panelEl?: ElementRef<HTMLElement>;
+    columnsCmp?: TimeColumnsComponent;
+    readonly panelId: string;
+    value: Date | null;
+    isOpen: boolean;
+    /**
+     * Day-only copies of `min` / `max` for the calendar. The calendar compares
+     * whole `Date`s, so passing a bound that carries a time would disable its own
+     * day — 09:00 on the min day would look "before" a 09:30 minimum.
+     */
+    calendarMin?: Date;
+    calendarMax?: Date;
+    readonly footerButtonClass: string;
+    protected cn: typeof cn;
+    private cleanup?;
+    private onChange;
+    private onTouched;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnChanges(): void;
+    private readonly outsideClickHandler;
+    private readonly escapeHandler;
+    get hour(): number | null;
+    get minute(): number | null;
+    get second(): number | null;
+    get displayValue(): string;
+    /**
+     * The time bound only bites on the boundary day itself: on the min day the
+     * columns start at the min time, on any later day they start at midnight.
+     */
+    get minSeconds(): number;
+    get maxSeconds(): number;
+    get computedTriggerClass(): string;
+    toggle(): void;
+    open(): void;
+    close(): void;
+    onTriggerKeyDown(event: KeyboardEvent): void;
+    /**
+     * Applies a newly picked day, carrying the existing time across. With no
+     * time chosen yet the day starts at midnight.
+     */
+    onDateSelect(date: Date | null): void;
+    /**
+     * Applies a newly picked time, carrying the existing day across. With no day
+     * chosen yet the time lands on today.
+     */
+    onTimeChange(parts: TimeParts): void;
+    clear(): void;
+    done(): void;
+    private commit;
+    private updatePosition;
+    private teardown;
+    ngOnDestroy(): void;
+    writeValue(value: Date | string | null | undefined): void;
+    registerOnChange(fn: (value: Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "tolle-date-time-picker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "use12Hours": { "alias": "use12Hours"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "minuteStep": { "alias": "minuteStep"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "displayFormat": { "alias": "displayFormat"; "required": false; }; "size": { "alias": "size"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+export {};

package/lib/direction.component.d.ts

@@ -0,0 +1,45 @@
+import { EventEmitter, OnChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Writing direction of a subtree: explicit, or inferred from its text. */
+export type Direction = 'ltr' | 'rtl' | 'auto';
+/**
+ * Publishes the application's current writing direction so components can adapt
+ * without reading the DOM.
+ *
+ * Direction is not an input of most components, so an OnPush view would never be
+ * marked dirty by a change. Subscribe to `direction$` and call `markForCheck()`
+ * on emission wherever the rendered output depends on it.
+ */
+export declare class DirectionService {
+    private directionSource;
+    /** Emits the current writing direction, starting with the present value. */
+    readonly direction$: import("rxjs").Observable<Direction>;
+    /** The current writing direction. */
+    get direction(): Direction;
+    /** Whether the current direction is explicitly right-to-left. */
+    get isRtl(): boolean;
+    /** Sets the current direction, emitting only when it actually changes. */
+    setDirection(direction: Direction): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DirectionService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DirectionService>;
+}
+/**
+ * Sets the `dir` attribute on its host and publishes that direction to
+ * `DirectionService`, so a whole chat surface can be flipped to RTL from one
+ * place. Put it on the outermost element of the subtree you want to flip.
+ * @new
+ */
+export declare class DirectionDirective implements OnChanges {
+    /** Writing direction applied to the host's `dir` attribute. @default 'ltr' */
+    tolleDirection: Direction;
+    /** Whether to publish this direction to the app-wide `DirectionService`. @default true */
+    tolleDirectionPublish: boolean;
+    /** Emitted with the direction whenever it changes. */
+    directionChange: EventEmitter<Direction>;
+    private readonly service;
+    /** The resolved `dir` attribute value written onto the host. */
+    get dir(): Direction;
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DirectionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DirectionDirective, "[tolleDirection]", never, { "tolleDirection": { "alias": "tolleDirection"; "required": false; }; "tolleDirectionPublish": { "alias": "tolleDirectionPublish"; "required": false; }; }, { "directionChange": "directionChange"; }, never, never, true, never>;
+}

package/lib/field.component.d.ts

@@ -0,0 +1,201 @@
+import { OnChanges } from '@angular/core';
+import { type VariantProps } from 'class-variance-authority';
+import { cn } from './utils/cn';
+import * as i0 from "@angular/core";
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type FieldProps = VariantProps<typeof fieldVariants>;
+/**
+ * Wraps a label, a control and its help/error text into one accessible form
+ * field. Composes *around* the existing controls (`tolle-input`,
+ * `tolle-select`, …) — it does not replace them.
+ *
+ * Use `tolle-item` instead when displaying content rather than a form control.
+ * @new
+ */
+export declare class FieldComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Layout direction; `responsive` goes horizontal at the `@md` container width. @default 'vertical' */
+    orientation: FieldProps['orientation'];
+    /** Marks the field invalid, turning on the destructive styling for descendants. @default false */
+    invalid: boolean;
+    /** Extra Tailwind classes merged onto the field via `cn()` (last-wins). */
+    class: string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldComponent, "tolle-field", never, { "orientation": { "alias": "orientation"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Label for a field's control. Set `for` to the control's `id` so clicking the
+ * label focuses it.
+ */
+export declare class FieldLabelComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Id of the control this label describes; wire it to the control's `id`. @default '' */
+    for: string;
+    /** Appends a required marker (*) after the label text. @default false */
+    required: boolean;
+    /** Extra Tailwind classes merged onto the label via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldLabelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldLabelComponent, "tolle-field-label", never, { "for": { "alias": "for"; "required": false; }; "required": { "alias": "required"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** Column that groups the control with its description and error text. */
+export declare class FieldContentComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Extra Tailwind classes merged onto the content column via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldContentComponent, "tolle-field-content", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Helper text below a control. Give it an `id` and point the control's
+ * `aria-describedby` at it.
+ */
+export declare class FieldDescriptionComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Id to reference from the control's `aria-describedby`. @default '' */
+    id: string;
+    /** Extra Tailwind classes merged onto the description via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldDescriptionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldDescriptionComponent, "tolle-field-description", never, { "id": { "alias": "id"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Error text for a field. Renders nothing when there is no error, so it is safe
+ * to leave in the template permanently. Announces via `role="alert"`.
+ */
+export declare class FieldErrorComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /**
+     * Validation message(s). Accepts a single string, an array of strings, or an
+     * Angular `ValidationErrors`-style object whose values are messages.
+     * @default ''
+     */
+    errors: string | string[] | Record<string, any> | null;
+    /** Id to reference from the control's `aria-describedby`. @default '' */
+    id: string;
+    /** Extra Tailwind classes merged onto the error text via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    /** Normalises the three accepted `errors` shapes to a flat list of strings. */
+    get messages(): string[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldErrorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldErrorComponent, "tolle-field-error", never, { "errors": { "alias": "errors"; "required": false; }; "id": { "alias": "id"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+/** Stacks several fields with consistent spacing. */
+export declare class FieldGroupComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Extra Tailwind classes merged onto the group via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldGroupComponent, "tolle-field-group", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** Semantic `<fieldset>` grouping related fields under a legend. */
+export declare class FieldSetComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Extra Tailwind classes merged onto the fieldset via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldSetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldSetComponent, "tolle-field-set", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+declare const fieldLegendVariants: (props?: ({
+    variant?: "label" | "legend" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type FieldLegendProps = VariantProps<typeof fieldLegendVariants>;
+/** `<legend>` for a `tolle-field-set`. */
+export declare class FieldLegendComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Type scale of the legend. @default 'legend' */
+    variant: FieldLegendProps['variant'];
+    /** Extra Tailwind classes merged onto the legend via `cn()` (last-wins). */
+    class: string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldLegendComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldLegendComponent, "tolle-field-legend", never, { "variant": { "alias": "variant"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** Divider between sections of a form. */
+export declare class FieldSeparatorComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Extra Tailwind classes merged onto the separator via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldSeparatorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldSeparatorComponent, "tolle-field-separator", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+/** Title for a group of fields that is not a `<legend>`. */
+export declare class FieldTitleComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Extra Tailwind classes merged onto the title via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldTitleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldTitleComponent, "tolle-field-title", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export {};

package/lib/inline-citation.component.d.ts

@@ -0,0 +1,103 @@
+import { OnDestroy, OnChanges } from '@angular/core';
+import { type VariantProps } from 'class-variance-authority';
+import * as i0 from "@angular/core";
+declare const inlineCitationVariants: (props?: ({
+    variant?: "default" | "muted" | "subtle" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type InlineCitationProps = VariantProps<typeof inlineCitationVariants>;
+/**
+ * A superscript citation marker for prose. Hovering the marker reveals the
+ * projected source card, positioned by the existing `tolle-hover-card`.
+ *
+ * ```html
+ * The model was released in March.<tolle-inline-citation [index]="1">
+ *   <tolle-inline-citation-card
+ *     title="Release notes"
+ *     url="https://example.com/notes"
+ *     snippet="Shipped on 14 March."
+ *   ></tolle-inline-citation-card>
+ * </tolle-inline-citation>
+ * ```
+ * @new
+ */
+export declare class InlineCitationComponent implements OnChanges, OnDestroy {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Number rendered in the superscript marker. @default 1 */
+    index: number | string;
+    /** Colour treatment of the marker. @default 'default' */
+    variant: InlineCitationProps['variant'];
+    /** Text size of the marker. @default 'default' */
+    size: InlineCitationProps['size'];
+    /** Side of the marker the source card opens on. @default 'top' */
+    placement: 'top' | 'bottom' | 'left' | 'right';
+    /** Milliseconds to wait before opening the card. @default 150 */
+    openDelay: number;
+    /** Milliseconds to wait before closing the card. @default 200 */
+    closeDelay: number;
+    /** Accessible label for the marker; falls back to "Citation {index}". @default '' */
+    ariaLabel: string;
+    /** Extra Tailwind classes merged onto the marker via `cn()` (last-wins). */
+    class: string;
+    /** Extra Tailwind classes merged onto the hover card panel via `cn()` (last-wins). */
+    cardClass: string;
+    private readonly cdr;
+    private refreshTimer?;
+    get computedClass(): string;
+    get contentClass(): string;
+    /**
+     * `tolle-hover-card` flips its own visibility from a `setTimeout`, which never
+     * marks this OnPush view dirty. Re-check just after the delay elapses so the
+     * card actually appears (and disappears) inside an OnPush host.
+     */
+    scheduleRefresh(delay: number): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InlineCitationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InlineCitationComponent, "tolle-inline-citation", never, { "index": { "alias": "index"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "openDelay": { "alias": "openDelay"; "required": false; }; "closeDelay": { "alias": "closeDelay"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "class": { "alias": "class"; "required": false; }; "cardClass": { "alias": "cardClass"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** The source preview shown inside a citation's hover card. */
+export declare class InlineCitationCardComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Title of the cited source. @default '' */
+    title: string;
+    /** Link to the cited source. @default '' */
+    url: string;
+    /** Short excerpt from the source. @default '' */
+    snippet: string;
+    /** Extra Tailwind classes merged onto the card via `cn()` (last-wins). */
+    class: string;
+    get computedClass(): string;
+    /** The URL without its scheme, which reads better in a narrow card. */
+    get displayUrl(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InlineCitationCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InlineCitationCardComponent, "tolle-inline-citation-card", never, { "title": { "alias": "title"; "required": false; }; "url": { "alias": "url"; "required": false; }; "snippet": { "alias": "snippet"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** A pulled quote from the cited source, shown inside the citation card. */
+export declare class InlineCitationQuoteComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges(): void;
+    /** Attribution shown beneath the quote. @default '' */
+    cite: string;
+    /** Extra Tailwind classes merged onto the quote via `cn()` (last-wins). */
+    class: string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InlineCitationQuoteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InlineCitationQuoteComponent, "tolle-inline-citation-quote", never, { "cite": { "alias": "cite"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export {};

package/lib/input-group.component.d.ts

@@ -0,0 +1,150 @@
+import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { type VariantProps } from 'class-variance-authority';
+import { cn } from './utils/cn';
+import * as i0 from "@angular/core";
+declare const inputGroupVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    invalid?: boolean | null | undefined;
+    stacked?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type InputGroupProps = VariantProps<typeof inputGroupVariants>;
+/**
+ * Wraps an input with leading/trailing addons — icons, text, buttons or a
+ * spinner — inside a single bordered control that shows one shared focus ring.
+ *
+ * Put a `tolle-input-group-input` (or `tolle-input-group-textarea`) inside,
+ * alongside any number of `tolle-input-group-addon` elements.
+ * @new
+ */
+export declare class InputGroupComponent {
+    /** Height and text size of the group; match it to the input inside. @default 'default' */
+    size: InputGroupProps['size'];
+    /** Applies the destructive border and focus ring. @default false */
+    invalid: boolean;
+    /** Switches to a stacked column layout for `block-start`/`block-end` addons. @default false */
+    stacked: boolean;
+    /** Extra Tailwind classes merged onto the group via `cn()` (last-wins). */
+    class: string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputGroupComponent, "tolle-input-group", never, { "size": { "alias": "size"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type InputGroupAddonProps = VariantProps<typeof inputGroupAddonVariants>;
+/**
+ * A slot beside (or above/below) the input for icons, text or buttons.
+ * Use `block-start` / `block-end` together with the group's `stacked` input.
+ */
+export declare class InputGroupAddonComponent {
+    /** Where the addon sits relative to the input. @default 'inline-start' */
+    align: InputGroupAddonProps['align'];
+    /** Extra Tailwind classes merged onto the addon via `cn()` (last-wins). */
+    class: string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputGroupAddonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputGroupAddonComponent, "tolle-input-group-addon", never, { "align": { "alias": "align"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+declare const inputGroupButtonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type InputGroupButtonProps = VariantProps<typeof inputGroupButtonVariants>;
+/** A compact button sized to sit inside an input group addon. */
+export declare class InputGroupButtonComponent {
+    /** Visual style of the button. @default 'ghost' */
+    variant: InputGroupButtonProps['variant'];
+    /** Size of the button; the `icon-*` sizes render a square. @default 'icon-sm' */
+    size: InputGroupButtonProps['size'];
+    /** Native button type. @default 'button' */
+    type: 'button' | 'submit' | 'reset';
+    /** Disables the button. @default false */
+    disabled: boolean;
+    /** Accessible name — required when the button shows only an icon. @default '' */
+    ariaLabel: string;
+    /** Extra Tailwind classes merged onto the button via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the click event when the button is pressed. */
+    clicked: EventEmitter<MouseEvent>;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputGroupButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputGroupButtonComponent, "tolle-input-group-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+/** Plain text inside an addon — a unit, prefix, or character counter. */
+export declare class InputGroupTextComponent {
+    /** Extra Tailwind classes merged onto the text via `cn()` (last-wins). */
+    class: string;
+    protected cn: typeof cn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputGroupTextComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputGroupTextComponent, "tolle-input-group-text", never, { "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * The input inside a `tolle-input-group`. Deliberately borderless and
+ * unfocusable-looking — the surrounding group owns the border and focus ring.
+ */
+export declare class InputGroupInputComponent implements ControlValueAccessor {
+    private cdr;
+    /** Id applied to the underlying `<input>`. */
+    id: string;
+    /** Native input type. @default 'text' */
+    type: string;
+    /** Placeholder text. @default '' */
+    placeholder: string;
+    /** Disables the input. @default false */
+    disabled: boolean;
+    /** Makes the input read-only. @default false */
+    readonly: boolean;
+    /** Id of the element describing this input, for `aria-describedby`. @default '' */
+    ariaDescribedby: string;
+    /** Extra Tailwind classes merged onto the input via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the new value on every keystroke. */
+    valueChange: EventEmitter<string>;
+    value: string | null;
+    onChange: (value: string) => void;
+    onTouched: () => void;
+    constructor(cdr: ChangeDetectorRef);
+    get computedClass(): string;
+    onInputChange(event: Event): void;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputGroupInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputGroupInputComponent, "tolle-input-group-input", never, { "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+/** The textarea equivalent of `tolle-input-group-input`. */
+export declare class InputGroupTextareaComponent implements ControlValueAccessor {
+    private cdr;
+    /** Id applied to the underlying `<textarea>`. */
+    id: string;
+    /** Visible rows. @default 3 */
+    rows: number;
+    /** Placeholder text. @default '' */
+    placeholder: string;
+    /** Disables the textarea. @default false */
+    disabled: boolean;
+    /** Makes the textarea read-only. @default false */
+    readonly: boolean;
+    /** Id of the element describing this textarea, for `aria-describedby`. @default '' */
+    ariaDescribedby: string;
+    /** Extra Tailwind classes merged onto the textarea via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the new value on every keystroke. */
+    valueChange: EventEmitter<string>;
+    value: string | null;
+    onChange: (value: string) => void;
+    onTouched: () => void;
+    constructor(cdr: ChangeDetectorRef);
+    get computedClass(): string;
+    onInputChange(event: Event): void;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputGroupTextareaComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputGroupTextareaComponent, "tolle-input-group-textarea", never, { "id": { "alias": "id"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+export {};