@compsych-ui-components/angular 7.0.42 → 7.0.44

package/lib/dropdown/dropdown.d.ts

@@ -3,7 +3,7 @@ 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 { DropdownLabelPosition, DropdownOption, DropdownSize } from './dropdown-types';
 import * as i0 from "@angular/core";
 /**
  * A labelled single-select dropdown built on the CDK Listbox (`@angular/cdk/listbox`)
@@ -35,7 +35,7 @@ export declare class DropdownComponent implements ControlValueAccessor, OnChange
     value: string;
     /** Selectable options rendered in the overlay panel. */
     options: DropdownOption[];
-    /** Size variant — controls height, padding, and font size. Defaults to `'medium'`. */
+    /** Size variant — controls height, padding, and font size. Defaults to `'md'`. */
     size: DropdownSize;
     /** Native `id` attribute for the trigger. Auto-generated if omitted. */
     id?: string;
@@ -73,8 +73,20 @@ export declare class DropdownComponent implements ControlValueAccessor, OnChange
     disabled: boolean;
     /** Visually hides the label while keeping it accessible to screen readers. Supports boolean coercion. */
     hideLabel: boolean;
-    /** Lucide icon name rendered inside the trigger before the text (e.g. `'globe'`). */
+    /** Places the label above the trigger (`'top'`, default) or beside it (`'left'`). */
+    labelPosition: DropdownLabelPosition;
+    /**
+     * Renders the label as the trigger's own resting text instead of a separate
+     * label above/beside it — e.g. the trigger reads "I want to" until an option
+     * is chosen. No visible external label is shown, but the `label` is still
+     * exposed to assistive tech (a screen-reader-only `<label>` + `aria-labelledby`),
+     * so the field is announced as a properly labelled combobox. Supports boolean coercion.
+     */
+    inlineLabel: boolean;
+    /** Lucide icon name rendered inside the trigger, before the displayed value/placeholder (e.g. `'globe'`). */
     leadingIcon?: string;
+    /** Default Lucide icon shown before every option's label; each option's own `icon` (from the Icon Mapping) overrides it. */
+    optionsLeadingIcon?: string;
     /** Emits the newly selected value whenever the user picks an option. */
     readonly valueChange: EventEmitter<string>;
     /** Emitted when the overlay panel opens. */
@@ -82,17 +94,25 @@ export declare class DropdownComponent implements ControlValueAccessor, OnChange
     /** Emitted when the overlay panel closes. */
     readonly closed: EventEmitter<void>;
     protected readonly chevronSvg: SafeHtml;
-    protected readonly checkSvg: SafeHtml;
     protected leadingIconSvg: SafeHtml | null;
+    private readonly optionIconCache;
     protected isOpen: boolean;
     protected overlayWidth: number;
     protected readonly overlayPositions: ConnectedPosition[];
     ngOnChanges(): void;
     private buildIconSvg;
+    /** Cached option-icon SVG by Lucide name (stable reference so option rows don't re-render each cycle). */
+    protected optionIconSvg(name: string | undefined): SafeHtml;
     get triggerId(): string;
     get labelId(): string;
     get listboxId(): string;
     get selectedOption(): DropdownOption | undefined;
+    /**
+     * Resting text shown in the trigger: the selected option's label, else the
+     * `label` in inline-label mode (so the label reads as the field's own text),
+     * else the placeholder.
+     */
+    get triggerText(): string;
     /** 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. */
@@ -116,9 +136,10 @@ export declare class DropdownComponent implements ControlValueAccessor, OnChange
     /** 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; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; }, { "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, 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; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "inlineLabel": { "alias": "inlineLabel"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "optionsLeadingIcon": { "alias": "optionsLeadingIcon"; "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;
+    static ngAcceptInputType_inlineLabel: unknown;
 }

package/package.json

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