@compsych-ui-components/angular 7.0.26 → 7.0.31

package/lib/dropdown/dropdown.d.ts

@@ -0,0 +1,120 @@
+import { EventEmitter } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ListboxValueChangeEvent } from '@angular/cdk/listbox';
+import { ConnectedPosition } from '@angular/cdk/overlay';
+import { DropdownOption, DropdownSize } from './dropdown-types';
+import * as i0 from "@angular/core";
+/**
+ * A labelled single-select dropdown built on the CDK Listbox (`@angular/cdk/listbox`)
+ * and CDK Overlay. The trigger renders the closed field (label, placeholder/selected
+ * value and chevron); the options open in an overlay panel with full keyboard support
+ * (arrow keys, Home/End, typeahead) provided by the CDK listbox.
+ *
+ * Implements `ControlValueAccessor` so it works with both reactive forms
+ * (`formControlName`, `[formControl]`) and template-driven forms (`ngModel`). The error
+ * visual state is driven automatically by the bound `FormControl`'s validity once the
+ * field has been touched, and can also be set explicitly via the `error` input.
+ */
+export declare class DropdownComponent implements ControlValueAccessor {
+    private readonly _autoId;
+    private readonly cdr;
+    private readonly sanitizer;
+    private _onChange;
+    private _onTouched;
+    /** Injected when the component is used inside a reactive or template-driven form. */
+    protected readonly ngControl: NgControl | null;
+    constructor();
+    private triggerBtn?;
+    private listboxEl?;
+    /** Label displayed above the trigger. */
+    label: string;
+    /** Text shown in the trigger when no option is selected. */
+    placeholder: string;
+    /** Currently selected value. When used in a form, the form controls the value. */
+    value: string;
+    /** Selectable options rendered in the overlay panel. */
+    options: DropdownOption[];
+    /** Size variant — controls height, padding, and font size. Defaults to `'medium'`. */
+    size: DropdownSize;
+    /** Native `id` attribute for the trigger. Auto-generated if omitted. */
+    id?: string;
+    /**
+     * Id(s) of external elements that describe the field, space-separated.
+     * Forwarded to `aria-describedby` on the trigger.
+     */
+    ariaDescribedBy?: string;
+    /** Text displayed below the trigger. Shown in red when in error state. */
+    supportingText: string;
+    /**
+     * Static error text shown in red when in error state. Used when the dropdown is
+     * outside a form (with `[error]="true"`). When inside a form, prefer `errorMessages`.
+     */
+    errorMessage: string;
+    /**
+     * Map of Angular validator error keys to display strings. The component reads
+     * `ngControl.errors` to determine which validator failed and shows the matching
+     * message in red below the trigger. Example: `{ required: 'Please choose an option' }`
+     */
+    errorMessages: Record<string, string>;
+    /**
+     * Adds a blue asterisk after the label. When used in a form, this is set
+     * automatically if the bound `FormControl` has `Validators.required`.
+     * Supports boolean coercion.
+     */
+    required: boolean;
+    /**
+     * Applies the error visual state (red border) explicitly. When used in a form,
+     * the error state is driven automatically from the `FormControl`'s validity once
+     * the field is touched — this input is only needed outside of forms. Supports boolean coercion.
+     */
+    error: boolean;
+    /** Disables the dropdown. When used in a form, also responds to `FormControl.disable()`. Supports boolean coercion. */
+    disabled: boolean;
+    /** Visually hides the label while keeping it accessible to screen readers. Supports boolean coercion. */
+    hideLabel: boolean;
+    /** Emits the newly selected value whenever the user picks an option. */
+    readonly valueChange: EventEmitter<string>;
+    /** Emitted when the overlay panel opens. */
+    readonly opened: EventEmitter<void>;
+    /** Emitted when the overlay panel closes. */
+    readonly closed: EventEmitter<void>;
+    protected readonly chevronSvg: SafeHtml;
+    protected readonly checkSvg: SafeHtml;
+    protected isOpen: boolean;
+    protected overlayWidth: number;
+    protected readonly overlayPositions: ConnectedPosition[];
+    private buildIconSvg;
+    get triggerId(): string;
+    get labelId(): string;
+    get listboxId(): string;
+    get selectedOption(): DropdownOption | undefined;
+    /** Value array bound to the CDK listbox (single-select, so 0 or 1 entry). */
+    get listboxValue(): readonly string[];
+    /** True when the bound FormControl is invalid and touched, or when `error` is explicitly set. */
+    get hasError(): boolean;
+    /** True when `required` is set explicitly, or when the bound FormControl has Validators.required. */
+    get isRequired(): boolean;
+    private get activeErrorMessage();
+    get displayedSupportingText(): string;
+    get describedBy(): string | null;
+    get wrapperClasses(): string;
+    protected toggle(): void;
+    protected open(): void;
+    protected close(refocus?: boolean): void;
+    protected onPanelAttach(): void;
+    protected onTriggerKeydown(event: KeyboardEvent): void;
+    protected onListboxKeydown(event: KeyboardEvent): void;
+    protected onListboxValueChange(event: ListboxValueChangeEvent<string>): void;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    /** Called by Angular when the bound FormControl is programmatically disabled or enabled. */
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "compsych-dropdown", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "size": { "alias": "size"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "error": { "alias": "error"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hideLabel": { "alias": "hideLabel"; "required": false; }; }, { "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_error: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_hideLabel: unknown;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych-ui-components/angular",
-  "version": "7.0.26",
+  "version": "7.0.31",
   "description": "Angular UI components for compsych",
   "publishConfig": {
     "access": "public",