@compsych-ui-components/angular 7.0.26 → 7.0.31

package/esm2022/lib/dropdown/dropdown.js

@@ -0,0 +1,438 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild, booleanAttribute, inject, } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { NgControl, Validators } from '@angular/forms';
+import { CdkListbox, CdkOption } from '@angular/cdk/listbox';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { LUCIDE_ICONS } from '@compsych-ui-components/shared/assets/lucide-icons.generated';
+import * as i0 from "@angular/core";
+let nextId = 0;
+/**
+ * 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 class DropdownComponent {
+    _autoId = `cmp-dropdown-${++nextId}`;
+    cdr = inject(ChangeDetectorRef);
+    sanitizer = inject(DomSanitizer);
+    _onChange = () => { };
+    _onTouched = () => { };
+    /** Injected when the component is used inside a reactive or template-driven form. */
+    ngControl;
+    constructor() {
+        const ctrl = inject(NgControl, { optional: true, self: true });
+        if (ctrl)
+            ctrl.valueAccessor = this;
+        this.ngControl = ctrl;
+        this.chevronSvg = this.buildIconSvg('chevron-down');
+        this.checkSvg = this.buildIconSvg('check');
+    }
+    triggerBtn;
+    listboxEl;
+    /** Label displayed above the trigger. */
+    label = '';
+    /** Text shown in the trigger when no option is selected. */
+    placeholder = '';
+    /** Currently selected value. When used in a form, the form controls the value. */
+    value = '';
+    /** Selectable options rendered in the overlay panel. */
+    options = [];
+    /** Size variant — controls height, padding, and font size. Defaults to `'medium'`. */
+    size = 'medium';
+    /** Native `id` attribute for the trigger. Auto-generated if omitted. */
+    id;
+    /**
+     * Id(s) of external elements that describe the field, space-separated.
+     * Forwarded to `aria-describedby` on the trigger.
+     */
+    ariaDescribedBy;
+    /** Text displayed below the trigger. Shown in red when in error state. */
+    supportingText = '';
+    /**
+     * 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 = '';
+    /**
+     * 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 = {};
+    /**
+     * 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 = false;
+    /**
+     * 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 = false;
+    /** Disables the dropdown. When used in a form, also responds to `FormControl.disable()`. Supports boolean coercion. */
+    disabled = false;
+    /** Visually hides the label while keeping it accessible to screen readers. Supports boolean coercion. */
+    hideLabel = false;
+    /** Emits the newly selected value whenever the user picks an option. */
+    valueChange = new EventEmitter();
+    /** Emitted when the overlay panel opens. */
+    opened = new EventEmitter();
+    /** Emitted when the overlay panel closes. */
+    closed = new EventEmitter();
+    chevronSvg;
+    checkSvg;
+    isOpen = false;
+    overlayWidth = 0;
+    overlayPositions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+    ];
+    buildIconSvg(name) {
+        const svg = (LUCIDE_ICONS[name] ?? '').replace('<svg ', '<svg width="20" height="20" ');
+        return this.sanitizer.bypassSecurityTrustHtml(svg);
+    }
+    get triggerId() {
+        return this.id ?? this._autoId;
+    }
+    get labelId() {
+        return this.triggerId + '-label';
+    }
+    get listboxId() {
+        return this.triggerId + '-listbox';
+    }
+    get selectedOption() {
+        return this.options.find((o) => o.value === this.value);
+    }
+    /** Value array bound to the CDK listbox (single-select, so 0 or 1 entry). */
+    get listboxValue() {
+        return this.value ? [this.value] : [];
+    }
+    /** True when the bound FormControl is invalid and touched, or when `error` is explicitly set. */
+    get hasError() {
+        return this.error || !!(this.ngControl?.invalid && this.ngControl.touched);
+    }
+    /** True when `required` is set explicitly, or when the bound FormControl has Validators.required. */
+    get isRequired() {
+        return this.required || !!this.ngControl?.control?.hasValidator(Validators.required);
+    }
+    get activeErrorMessage() {
+        const errors = this.ngControl?.errors;
+        if (!errors)
+            return '';
+        for (const key of Object.keys(errors)) {
+            if (this.errorMessages[key])
+                return this.errorMessages[key];
+        }
+        return '';
+    }
+    get displayedSupportingText() {
+        if (this.hasError) {
+            return this.activeErrorMessage || this.errorMessage || this.supportingText;
+        }
+        return this.supportingText;
+    }
+    get describedBy() {
+        const parts = [];
+        if (this.ariaDescribedBy)
+            parts.push(this.ariaDescribedBy);
+        if (this.supportingText || this.errorMessage || Object.keys(this.errorMessages).length) {
+            parts.push(this.triggerId + '-supporting');
+        }
+        return parts.length ? parts.join(' ') : null;
+    }
+    get wrapperClasses() {
+        return ['cmp-dropdown', this.size, this.disabled ? 'disabled' : '']
+            .filter(Boolean)
+            .join(' ');
+    }
+    // ── Open / close ──────────────────────────────────────────────────────────
+    toggle() {
+        if (this.isOpen) {
+            this.close(true);
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.disabled || this.isOpen)
+            return;
+        this.overlayWidth = this.triggerBtn?.nativeElement.offsetWidth ?? 0;
+        this.isOpen = true;
+        this.opened.emit();
+        this.cdr.markForCheck();
+    }
+    close(refocus = false) {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this._onTouched();
+        this.closed.emit();
+        if (refocus) {
+            setTimeout(() => this.triggerBtn?.nativeElement.focus());
+        }
+        this.cdr.markForCheck();
+    }
+    onPanelAttach() {
+        setTimeout(() => this.listboxEl?.nativeElement.focus());
+    }
+    // ── Keyboard ──────────────────────────────────────────────────────────────
+    onTriggerKeydown(event) {
+        if (this.disabled)
+            return;
+        if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && !this.isOpen) {
+            event.preventDefault();
+            this.open();
+        }
+        else if (event.key === 'Escape' && this.isOpen) {
+            event.preventDefault();
+            this.close(true);
+        }
+    }
+    onListboxKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close(true);
+        }
+        else if (event.key === 'Tab') {
+            event.preventDefault();
+            this.close(true);
+        }
+    }
+    onListboxValueChange(event) {
+        const next = event.value[0] ?? '';
+        this.value = next;
+        this._onChange(next);
+        this.valueChange.emit(next);
+        this.close(true);
+    }
+    // ── ControlValueAccessor ────────────────────────────────────────────────────
+    writeValue(value) {
+        this.value = value ?? '';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /** Called by Angular when the bound FormControl is programmatically disabled or enabled. */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DropdownComponent, isStandalone: true, selector: "compsych-dropdown", inputs: { label: "label", placeholder: "placeholder", value: "value", options: "options", size: "size", id: "id", ariaDescribedBy: "ariaDescribedBy", supportingText: "supportingText", errorMessage: "errorMessage", errorMessages: "errorMessages", required: ["required", "required", booleanAttribute], error: ["error", "error", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], hideLabel: ["hideLabel", "hideLabel", booleanAttribute] }, outputs: { valueChange: "valueChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true }, { propertyName: "listboxEl", first: true, predicate: ["listboxEl"], descendants: true }], ngImport: i0, template: `
+    <div [class]="wrapperClasses">
+      <div class="label-row" [class.sr-only]="hideLabel">
+        <label class="label" [id]="labelId" [for]="triggerId">
+          {{ label }}
+          @if (isRequired) {
+            <span class="required-marker" aria-hidden="true"> *</span>
+          }
+        </label>
+      </div>
+
+      <button
+        #triggerBtn
+        cdkOverlayOrigin
+        #origin="cdkOverlayOrigin"
+        type="button"
+        class="trigger"
+        [id]="triggerId"
+        [class.placeholder]="!selectedOption"
+        [class.error]="hasError"
+        [class.open]="isOpen"
+        [disabled]="disabled"
+        role="combobox"
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="isOpen"
+        [attr.aria-controls]="listboxId"
+        [attr.aria-labelledby]="labelId + ' ' + triggerId"
+        [attr.aria-invalid]="hasError ? 'true' : null"
+        [attr.aria-required]="isRequired ? 'true' : null"
+        [attr.aria-describedby]="describedBy"
+        (click)="toggle()"
+        (keydown)="onTriggerKeydown($event)"
+      >
+        <span class="trigger-text">{{ selectedOption?.label || placeholder }}</span>
+        <span class="trigger-chevron" aria-hidden="true" [innerHTML]="chevronSvg"></span>
+      </button>
+
+      @if (displayedSupportingText) {
+        <span class="supporting-text" [class.supporting-text--error]="hasError" [id]="triggerId + '-supporting'">
+          {{ displayedSupportingText }}
+        </span>
+      }
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen"
+      [cdkConnectedOverlayWidth]="overlayWidth"
+      [cdkConnectedOverlayPositions]="overlayPositions"
+      [cdkConnectedOverlayViewportMargin]="8"
+      (overlayOutsideClick)="close()"
+      (attach)="onPanelAttach()"
+      (detach)="close()"
+    >
+      <ul
+        #listboxEl
+        cdkListbox
+        class="panel"
+        [id]="listboxId"
+        [attr.aria-labelledby]="labelId"
+        [cdkListboxValue]="listboxValue"
+        (cdkListboxValueChange)="onListboxValueChange($event)"
+        (keydown)="onListboxKeydown($event)"
+      >
+        @for (opt of options; track opt.value) {
+          <li class="option" [cdkOption]="opt.value" [cdkOptionDisabled]="!!opt.disabled">
+            <span class="option-check" aria-hidden="true">
+              @if (opt.value === value) {
+                <span [innerHTML]="checkSvg"></span>
+              }
+            </span>
+            <span class="option-label">{{ opt.label }}</span>
+          </li>
+        }
+      </ul>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block}.cmp-dropdown{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-8)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.label-row{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.label{font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);font-weight:var(--label-medium-sys-font-weight-emphasized);line-height:var(--label-medium-sys-line-height);letter-spacing:var(--label-medium-sys-tracking);color:var(--surface-surface-sys-on-surface)}.cmp-dropdown.large .label{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);font-weight:var(--label-large-sys-font-weight-emphasized);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking)}.required-marker{color:var(--custom-info-sys-info)}.cmp-dropdown.disabled .label{opacity:.48}.trigger{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);margin:0;border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-variant);border-radius:var(--border-radius-sys-radius-sm);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--body-medium-sys-font-family);font-weight:var(--body-medium-sys-font-weight);text-align:start;cursor:pointer;appearance:none;-webkit-appearance:none;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.trigger-text{flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trigger.placeholder .trigger-text{color:var(--surface-surface-sys-on-surface-variant)}.trigger-chevron{display:flex;align-items:center;flex-shrink:0;color:var(--surface-surface-sys-on-surface-variant);transition:transform .15s ease}.trigger.open .trigger-chevron{transform:rotate(180deg)}.trigger:hover:not(:disabled):not(.open){box-shadow:0 4px 16px var(--transparent-neutral-sys-black-10),0 2px 4px #00000014}.trigger:focus-visible,.trigger.open{border-color:var(--accent-primary-sys-primary);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.trigger.error:not(:disabled):not(.open){border-color:var(--error-sys-error)}.trigger.error:focus-visible,.trigger.error.open{border-color:var(--error-sys-error);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.trigger:disabled{background-color:var(--surface-surface-container-sys-surface-container-low);color:var(--surface-surface-sys-on-surface-variant);border-color:var(--outline-sys-outline-variant);cursor:not-allowed;opacity:.48}.supporting-text{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface-variant)}.supporting-text--error{color:var(--error-sys-error)}.cmp-dropdown.disabled .supporting-text{opacity:.48}.cmp-dropdown.small .trigger{height:40px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-12);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height)}.cmp-dropdown.medium .trigger{height:48px;padding:var(--spacing-padding-sys-padding-12) var(--spacing-padding-sys-padding-16);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height)}.cmp-dropdown.large .trigger{height:56px;padding:var(--spacing-padding-sys-padding-16) var(--spacing-padding-sys-padding-20);border-radius:var(--border-radius-sys-radius-md);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height)}.panel{box-sizing:border-box;list-style:none;margin:0;padding:var(--spacing-padding-sys-padding-4);max-height:280px;overflow-y:auto;background-color:var(--surface-surface-container-sys-surface-container-lowest);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-variant);border-radius:var(--border-radius-sys-radius-sm);box-shadow:0 4px 16px var(--transparent-neutral-sys-black-10),0 2px 4px #00000014;outline:none;font-family:var(--body-medium-sys-font-family)}.option{box-sizing:border-box;display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-12);border-radius:var(--border-radius-sys-radius-sm);color:var(--surface-surface-sys-on-surface);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.option-check{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:var(--accent-primary-sys-primary)}.option-label{flex:1 0 0;min-width:0}.option:hover:not([aria-disabled=true]){background-color:var(--transparent-primary-sys-primary-08)}.option.cdk-option-active{background-color:var(--transparent-primary-sys-primary-08);outline:var(--border-width-sys-stroke-medium) solid var(--accent-primary-sys-primary);outline-offset:-2px}.option[aria-selected=true]{color:var(--accent-primary-sys-primary)}.option[aria-disabled=true]{color:var(--surface-surface-sys-on-surface-variant);cursor:not-allowed;opacity:.48}@media(forced-colors:active){.trigger{border:1px solid ButtonText;forced-color-adjust:none}.trigger:focus-visible,.trigger.open{outline:2px solid Highlight;outline-offset:2px}.trigger:disabled{color:GrayText;border-color:GrayText;background:ButtonFace;opacity:1}.cmp-dropdown.disabled .label{color:GrayText;opacity:1}.supporting-text--error{color:LinkText}.panel{border:1px solid ButtonText}.option.cdk-option-active{outline:2px solid Highlight;outline-offset:-2px}}\n"], dependencies: [{ kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'compsych-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkListbox, CdkOption, CdkConnectedOverlay, CdkOverlayOrigin], template: `
+    <div [class]="wrapperClasses">
+      <div class="label-row" [class.sr-only]="hideLabel">
+        <label class="label" [id]="labelId" [for]="triggerId">
+          {{ label }}
+          @if (isRequired) {
+            <span class="required-marker" aria-hidden="true"> *</span>
+          }
+        </label>
+      </div>
+
+      <button
+        #triggerBtn
+        cdkOverlayOrigin
+        #origin="cdkOverlayOrigin"
+        type="button"
+        class="trigger"
+        [id]="triggerId"
+        [class.placeholder]="!selectedOption"
+        [class.error]="hasError"
+        [class.open]="isOpen"
+        [disabled]="disabled"
+        role="combobox"
+        aria-haspopup="listbox"
+        [attr.aria-expanded]="isOpen"
+        [attr.aria-controls]="listboxId"
+        [attr.aria-labelledby]="labelId + ' ' + triggerId"
+        [attr.aria-invalid]="hasError ? 'true' : null"
+        [attr.aria-required]="isRequired ? 'true' : null"
+        [attr.aria-describedby]="describedBy"
+        (click)="toggle()"
+        (keydown)="onTriggerKeydown($event)"
+      >
+        <span class="trigger-text">{{ selectedOption?.label || placeholder }}</span>
+        <span class="trigger-chevron" aria-hidden="true" [innerHTML]="chevronSvg"></span>
+      </button>
+
+      @if (displayedSupportingText) {
+        <span class="supporting-text" [class.supporting-text--error]="hasError" [id]="triggerId + '-supporting'">
+          {{ displayedSupportingText }}
+        </span>
+      }
+    </div>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="isOpen"
+      [cdkConnectedOverlayWidth]="overlayWidth"
+      [cdkConnectedOverlayPositions]="overlayPositions"
+      [cdkConnectedOverlayViewportMargin]="8"
+      (overlayOutsideClick)="close()"
+      (attach)="onPanelAttach()"
+      (detach)="close()"
+    >
+      <ul
+        #listboxEl
+        cdkListbox
+        class="panel"
+        [id]="listboxId"
+        [attr.aria-labelledby]="labelId"
+        [cdkListboxValue]="listboxValue"
+        (cdkListboxValueChange)="onListboxValueChange($event)"
+        (keydown)="onListboxKeydown($event)"
+      >
+        @for (opt of options; track opt.value) {
+          <li class="option" [cdkOption]="opt.value" [cdkOptionDisabled]="!!opt.disabled">
+            <span class="option-check" aria-hidden="true">
+              @if (opt.value === value) {
+                <span [innerHTML]="checkSvg"></span>
+              }
+            </span>
+            <span class="option-label">{{ opt.label }}</span>
+          </li>
+        }
+      </ul>
+    </ng-template>
+  `, styles: [":host{display:block}.cmp-dropdown{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-8)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.label-row{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.label{font-family:var(--label-medium-sys-font-family);font-size:var(--label-medium-sys-font-size);font-weight:var(--label-medium-sys-font-weight-emphasized);line-height:var(--label-medium-sys-line-height);letter-spacing:var(--label-medium-sys-tracking);color:var(--surface-surface-sys-on-surface)}.cmp-dropdown.large .label{font-family:var(--label-large-sys-font-family);font-size:var(--label-large-sys-font-size);font-weight:var(--label-large-sys-font-weight-emphasized);line-height:var(--label-large-sys-line-height);letter-spacing:var(--label-large-sys-tracking)}.required-marker{color:var(--custom-info-sys-info)}.cmp-dropdown.disabled .label{opacity:.48}.trigger{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);margin:0;border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-variant);border-radius:var(--border-radius-sys-radius-sm);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--body-medium-sys-font-family);font-weight:var(--body-medium-sys-font-weight);text-align:start;cursor:pointer;appearance:none;-webkit-appearance:none;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.trigger-text{flex:1 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trigger.placeholder .trigger-text{color:var(--surface-surface-sys-on-surface-variant)}.trigger-chevron{display:flex;align-items:center;flex-shrink:0;color:var(--surface-surface-sys-on-surface-variant);transition:transform .15s ease}.trigger.open .trigger-chevron{transform:rotate(180deg)}.trigger:hover:not(:disabled):not(.open){box-shadow:0 4px 16px var(--transparent-neutral-sys-black-10),0 2px 4px #00000014}.trigger:focus-visible,.trigger.open{border-color:var(--accent-primary-sys-primary);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.trigger.error:not(:disabled):not(.open){border-color:var(--error-sys-error)}.trigger.error:focus-visible,.trigger.error.open{border-color:var(--error-sys-error);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.trigger:disabled{background-color:var(--surface-surface-container-sys-surface-container-low);color:var(--surface-surface-sys-on-surface-variant);border-color:var(--outline-sys-outline-variant);cursor:not-allowed;opacity:.48}.supporting-text{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface-variant)}.supporting-text--error{color:var(--error-sys-error)}.cmp-dropdown.disabled .supporting-text{opacity:.48}.cmp-dropdown.small .trigger{height:40px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-12);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height)}.cmp-dropdown.medium .trigger{height:48px;padding:var(--spacing-padding-sys-padding-12) var(--spacing-padding-sys-padding-16);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height)}.cmp-dropdown.large .trigger{height:56px;padding:var(--spacing-padding-sys-padding-16) var(--spacing-padding-sys-padding-20);border-radius:var(--border-radius-sys-radius-md);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height)}.panel{box-sizing:border-box;list-style:none;margin:0;padding:var(--spacing-padding-sys-padding-4);max-height:280px;overflow-y:auto;background-color:var(--surface-surface-container-sys-surface-container-lowest);border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline-variant);border-radius:var(--border-radius-sys-radius-sm);box-shadow:0 4px 16px var(--transparent-neutral-sys-black-10),0 2px 4px #00000014;outline:none;font-family:var(--body-medium-sys-font-family)}.option{box-sizing:border-box;display:flex;align-items:center;gap:var(--spacing-padding-sys-padding-8);padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-12);border-radius:var(--border-radius-sys-radius-sm);color:var(--surface-surface-sys-on-surface);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.option-check{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:var(--accent-primary-sys-primary)}.option-label{flex:1 0 0;min-width:0}.option:hover:not([aria-disabled=true]){background-color:var(--transparent-primary-sys-primary-08)}.option.cdk-option-active{background-color:var(--transparent-primary-sys-primary-08);outline:var(--border-width-sys-stroke-medium) solid var(--accent-primary-sys-primary);outline-offset:-2px}.option[aria-selected=true]{color:var(--accent-primary-sys-primary)}.option[aria-disabled=true]{color:var(--surface-surface-sys-on-surface-variant);cursor:not-allowed;opacity:.48}@media(forced-colors:active){.trigger{border:1px solid ButtonText;forced-color-adjust:none}.trigger:focus-visible,.trigger.open{outline:2px solid Highlight;outline-offset:2px}.trigger:disabled{color:GrayText;border-color:GrayText;background:ButtonFace;opacity:1}.cmp-dropdown.disabled .label{color:GrayText;opacity:1}.supporting-text--error{color:LinkText}.panel{border:1px solid ButtonText}.option.cdk-option-active{outline:2px solid Highlight;outline-offset:-2px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { triggerBtn: [{
+                type: ViewChild,
+                args: ['triggerBtn']
+            }], listboxEl: [{
+                type: ViewChild,
+                args: ['listboxEl']
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], ariaDescribedBy: [{
+                type: Input
+            }], supportingText: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], errorMessages: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], error: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideLabel: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], valueChange: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=dropdown.js.map

package/esm2022/lib/dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/dropdown/dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  ElementRef,\r\n  EventEmitter,\r\n  Input,\r\n  Output,\r\n  ViewChild,\r\n  booleanAttribute,\r\n  inject,\r\n} from '@angular/core';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { ControlValueAccessor, NgControl, Validators } from '@angular/forms';\r\nimport { CdkListbox, CdkOption, ListboxValueChangeEvent } from '@angular/cdk/listbox';\r\nimport { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition } from '@angular/cdk/overlay';\r\nimport { LUCIDE_ICONS } from '@compsych-ui-components/shared/assets/lucide-icons.generated';\r\nimport { DropdownOption, DropdownSize } from './dropdown-types';\r\n\r\nlet nextId = 0;\r\n\r\n/**\r\n * A labelled single-select dropdown built on the CDK Listbox (`@angular/cdk/listbox`)\r\n * and CDK Overlay. The trigger renders the closed field (label, placeholder/selected\r\n * value and chevron); the options open in an overlay panel with full keyboard support\r\n * (arrow keys, Home/End, typeahead) provided by the CDK listbox.\r\n *\r\n * Implements `ControlValueAccessor` so it works with both reactive forms\r\n * (`formControlName`, `[formControl]`) and template-driven forms (`ngModel`). The error\r\n * visual state is driven automatically by the bound `FormControl`'s validity once the\r\n * field has been touched, and can also be set explicitly via the `error` input.\r\n */\r\n@Component({\r\n  selector: 'compsych-dropdown',\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [CdkListbox, CdkOption, CdkConnectedOverlay, CdkOverlayOrigin],\r\n  template: `\r\n    <div [class]=\"wrapperClasses\">\r\n      <div class=\"label-row\" [class.sr-only]=\"hideLabel\">\r\n        <label class=\"label\" [id]=\"labelId\" [for]=\"triggerId\">\r\n          {{ label }}\r\n          @if (isRequired) {\r\n            <span class=\"required-marker\" aria-hidden=\"true\"> *</span>\r\n          }\r\n        </label>\r\n      </div>\r\n\r\n      <button\r\n        #triggerBtn\r\n        cdkOverlayOrigin\r\n        #origin=\"cdkOverlayOrigin\"\r\n        type=\"button\"\r\n        class=\"trigger\"\r\n        [id]=\"triggerId\"\r\n        [class.placeholder]=\"!selectedOption\"\r\n        [class.error]=\"hasError\"\r\n        [class.open]=\"isOpen\"\r\n        [disabled]=\"disabled\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"isOpen\"\r\n        [attr.aria-controls]=\"listboxId\"\r\n        [attr.aria-labelledby]=\"labelId + ' ' + triggerId\"\r\n        [attr.aria-invalid]=\"hasError ? 'true' : null\"\r\n        [attr.aria-required]=\"isRequired ? 'true' : null\"\r\n        [attr.aria-describedby]=\"describedBy\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n      >\r\n        <span class=\"trigger-text\">{{ selectedOption?.label || placeholder }}</span>\r\n        <span class=\"trigger-chevron\" aria-hidden=\"true\" [innerHTML]=\"chevronSvg\"></span>\r\n      </button>\r\n\r\n      @if (displayedSupportingText) {\r\n        <span class=\"supporting-text\" [class.supporting-text--error]=\"hasError\" [id]=\"triggerId + '-supporting'\">\r\n          {{ displayedSupportingText }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <ng-template\r\n      cdkConnectedOverlay\r\n      [cdkConnectedOverlayOrigin]=\"origin\"\r\n      [cdkConnectedOverlayOpen]=\"isOpen\"\r\n      [cdkConnectedOverlayWidth]=\"overlayWidth\"\r\n      [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n      [cdkConnectedOverlayViewportMargin]=\"8\"\r\n      (overlayOutsideClick)=\"close()\"\r\n      (attach)=\"onPanelAttach()\"\r\n      (detach)=\"close()\"\r\n    >\r\n      <ul\r\n        #listboxEl\r\n        cdkListbox\r\n        class=\"panel\"\r\n        [id]=\"listboxId\"\r\n        [attr.aria-labelledby]=\"labelId\"\r\n        [cdkListboxValue]=\"listboxValue\"\r\n        (cdkListboxValueChange)=\"onListboxValueChange($event)\"\r\n        (keydown)=\"onListboxKeydown($event)\"\r\n      >\r\n        @for (opt of options; track opt.value) {\r\n          <li class=\"option\" [cdkOption]=\"opt.value\" [cdkOptionDisabled]=\"!!opt.disabled\">\r\n            <span class=\"option-check\" aria-hidden=\"true\">\r\n              @if (opt.value === value) {\r\n                <span [innerHTML]=\"checkSvg\"></span>\r\n              }\r\n            </span>\r\n            <span class=\"option-label\">{{ opt.label }}</span>\r\n          </li>\r\n        }\r\n      </ul>\r\n    </ng-template>\r\n  `,\r\n  styleUrl: './dropdown.css',\r\n})\r\nexport class DropdownComponent implements ControlValueAccessor {\r\n  private readonly _autoId = `cmp-dropdown-${++nextId}`;\r\n  private readonly cdr = inject(ChangeDetectorRef);\r\n  private readonly sanitizer = inject(DomSanitizer);\r\n  private _onChange: (value: string) => void = () => {};\r\n  private _onTouched: () => void = () => {};\r\n\r\n  /** Injected when the component is used inside a reactive or template-driven form. */\r\n  protected readonly ngControl: NgControl | null;\r\n\r\n  constructor() {\r\n    const ctrl = inject(NgControl, { optional: true, self: true });\r\n    if (ctrl) ctrl.valueAccessor = this;\r\n    this.ngControl = ctrl;\r\n    this.chevronSvg = this.buildIconSvg('chevron-down');\r\n    this.checkSvg = this.buildIconSvg('check');\r\n  }\r\n\r\n  @ViewChild('triggerBtn') private triggerBtn?: ElementRef<HTMLButtonElement>;\r\n  @ViewChild('listboxEl') private listboxEl?: ElementRef<HTMLUListElement>;\r\n\r\n  /** Label displayed above the trigger. */\r\n  @Input() label = '';\r\n  /** Text shown in the trigger when no option is selected. */\r\n  @Input() placeholder = '';\r\n  /** Currently selected value. When used in a form, the form controls the value. */\r\n  @Input() value = '';\r\n  /** Selectable options rendered in the overlay panel. */\r\n  @Input() options: DropdownOption[] = [];\r\n  /** Size variant — controls height, padding, and font size. Defaults to `'medium'`. */\r\n  @Input() size: DropdownSize = 'medium';\r\n  /** Native `id` attribute for the trigger. Auto-generated if omitted. */\r\n  @Input() id?: string;\r\n  /**\r\n   * Id(s) of external elements that describe the field, space-separated.\r\n   * Forwarded to `aria-describedby` on the trigger.\r\n   */\r\n  @Input() ariaDescribedBy?: string;\r\n  /** Text displayed below the trigger. Shown in red when in error state. */\r\n  @Input() supportingText = '';\r\n  /**\r\n   * Static error text shown in red when in error state. Used when the dropdown is\r\n   * outside a form (with `[error]=\"true\"`). When inside a form, prefer `errorMessages`.\r\n   */\r\n  @Input() errorMessage = '';\r\n  /**\r\n   * Map of Angular validator error keys to display strings. The component reads\r\n   * `ngControl.errors` to determine which validator failed and shows the matching\r\n   * message in red below the trigger. Example: `{ required: 'Please choose an option' }`\r\n   */\r\n  @Input() errorMessages: Record<string, string> = {};\r\n  /**\r\n   * Adds a blue asterisk after the label. When used in a form, this is set\r\n   * automatically if the bound `FormControl` has `Validators.required`.\r\n   * Supports boolean coercion.\r\n   */\r\n  @Input({ transform: booleanAttribute }) required = false;\r\n  /**\r\n   * Applies the error visual state (red border) explicitly. When used in a form,\r\n   * the error state is driven automatically from the `FormControl`'s validity once\r\n   * the field is touched — this input is only needed outside of forms. Supports boolean coercion.\r\n   */\r\n  @Input({ transform: booleanAttribute }) error = false;\r\n  /** Disables the dropdown. When used in a form, also responds to `FormControl.disable()`. Supports boolean coercion. */\r\n  @Input({ transform: booleanAttribute }) disabled = false;\r\n  /** Visually hides the label while keeping it accessible to screen readers. Supports boolean coercion. */\r\n  @Input({ transform: booleanAttribute }) hideLabel = false;\r\n\r\n  /** Emits the newly selected value whenever the user picks an option. */\r\n  @Output() readonly valueChange = new EventEmitter<string>();\r\n  /** Emitted when the overlay panel opens. */\r\n  @Output() readonly opened = new EventEmitter<void>();\r\n  /** Emitted when the overlay panel closes. */\r\n  @Output() readonly closed = new EventEmitter<void>();\r\n\r\n  protected readonly chevronSvg: SafeHtml;\r\n  protected readonly checkSvg: SafeHtml;\r\n\r\n  protected isOpen = false;\r\n  protected overlayWidth = 0;\r\n  protected readonly overlayPositions: ConnectedPosition[] = [\r\n    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },\r\n    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },\r\n  ];\r\n\r\n  private buildIconSvg(name: string): SafeHtml {\r\n    const svg = (LUCIDE_ICONS[name] ?? '').replace('<svg ', '<svg width=\"20\" height=\"20\" ');\r\n    return this.sanitizer.bypassSecurityTrustHtml(svg);\r\n  }\r\n\r\n  get triggerId(): string {\r\n    return this.id ?? this._autoId;\r\n  }\r\n\r\n  get labelId(): string {\r\n    return this.triggerId + '-label';\r\n  }\r\n\r\n  get listboxId(): string {\r\n    return this.triggerId + '-listbox';\r\n  }\r\n\r\n  get selectedOption(): DropdownOption | undefined {\r\n    return this.options.find((o) => o.value === this.value);\r\n  }\r\n\r\n  /** Value array bound to the CDK listbox (single-select, so 0 or 1 entry). */\r\n  get listboxValue(): readonly string[] {\r\n    return this.value ? [this.value] : [];\r\n  }\r\n\r\n  /** True when the bound FormControl is invalid and touched, or when `error` is explicitly set. */\r\n  get hasError(): boolean {\r\n    return this.error || !!(this.ngControl?.invalid && this.ngControl.touched);\r\n  }\r\n\r\n  /** True when `required` is set explicitly, or when the bound FormControl has Validators.required. */\r\n  get isRequired(): boolean {\r\n    return this.required || !!this.ngControl?.control?.hasValidator(Validators.required);\r\n  }\r\n\r\n  private get activeErrorMessage(): string {\r\n    const errors = this.ngControl?.errors;\r\n    if (!errors) return '';\r\n    for (const key of Object.keys(errors)) {\r\n      if (this.errorMessages[key]) return this.errorMessages[key];\r\n    }\r\n    return '';\r\n  }\r\n\r\n  get displayedSupportingText(): string {\r\n    if (this.hasError) {\r\n      return this.activeErrorMessage || this.errorMessage || this.supportingText;\r\n    }\r\n    return this.supportingText;\r\n  }\r\n\r\n  get describedBy(): string | null {\r\n    const parts: string[] = [];\r\n    if (this.ariaDescribedBy) parts.push(this.ariaDescribedBy);\r\n    if (this.supportingText || this.errorMessage || Object.keys(this.errorMessages).length) {\r\n      parts.push(this.triggerId + '-supporting');\r\n    }\r\n    return parts.length ? parts.join(' ') : null;\r\n  }\r\n\r\n  get wrapperClasses(): string {\r\n    return ['cmp-dropdown', this.size, this.disabled ? 'disabled' : '']\r\n      .filter(Boolean)\r\n      .join(' ');\r\n  }\r\n\r\n  // ── Open / close ──────────────────────────────────────────────────────────\r\n\r\n  protected toggle(): void {\r\n    if (this.isOpen) {\r\n      this.close(true);\r\n    } else {\r\n      this.open();\r\n    }\r\n  }\r\n\r\n  protected open(): void {\r\n    if (this.disabled || this.isOpen) return;\r\n    this.overlayWidth = this.triggerBtn?.nativeElement.offsetWidth ?? 0;\r\n    this.isOpen = true;\r\n    this.opened.emit();\r\n    this.cdr.markForCheck();\r\n  }\r\n\r\n  protected close(refocus = false): void {\r\n    if (!this.isOpen) return;\r\n    this.isOpen = false;\r\n    this._onTouched();\r\n    this.closed.emit();\r\n    if (refocus) {\r\n      setTimeout(() => this.triggerBtn?.nativeElement.focus());\r\n    }\r\n    this.cdr.markForCheck();\r\n  }\r\n\r\n  protected onPanelAttach(): void {\r\n    setTimeout(() => this.listboxEl?.nativeElement.focus());\r\n  }\r\n\r\n  // ── Keyboard ──────────────────────────────────────────────────────────────\r\n\r\n  protected onTriggerKeydown(event: KeyboardEvent): void {\r\n    if (this.disabled) return;\r\n    if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && !this.isOpen) {\r\n      event.preventDefault();\r\n      this.open();\r\n    } else if (event.key === 'Escape' && this.isOpen) {\r\n      event.preventDefault();\r\n      this.close(true);\r\n    }\r\n  }\r\n\r\n  protected onListboxKeydown(event: KeyboardEvent): void {\r\n    if (event.key === 'Escape') {\r\n      event.preventDefault();\r\n      this.close(true);\r\n    } else if (event.key === 'Tab') {\r\n      event.preventDefault();\r\n      this.close(true);\r\n    }\r\n  }\r\n\r\n  protected onListboxValueChange(event: ListboxValueChangeEvent<string>): void {\r\n    const next = event.value[0] ?? '';\r\n    this.value = next;\r\n    this._onChange(next);\r\n    this.valueChange.emit(next);\r\n    this.close(true);\r\n  }\r\n\r\n  // ── ControlValueAccessor ────────────────────────────────────────────────────\r\n\r\n  writeValue(value: string | null): void {\r\n    this.value = value ?? '';\r\n    this.cdr.markForCheck();\r\n  }\r\n\r\n  registerOnChange(fn: (value: string) => void): void {\r\n    this._onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: () => void): void {\r\n    this._onTouched = fn;\r\n  }\r\n\r\n  /** Called by Angular when the bound FormControl is programmatically disabled or enabled. */\r\n  setDisabledState(isDisabled: boolean): void {\r\n    this.disabled = isDisabled;\r\n    this.cdr.markForCheck();\r\n  }\r\n}\r\n"]}

package/index.d.ts

@@ -7,6 +7,7 @@ import * as i5 from "./lib/sidebar/sidebar";
 import * as i6 from "./lib/card-base/card";
 import * as i7 from "./lib/text-input/text-input";
 import * as i8 from "./lib/dialog/dialog";
+import * as i9 from "./lib/dropdown/dropdown";
 export { ButtonComponent } from './lib/button/button';
 export type { ButtonVariant, ButtonSize, ButtonType } from './lib/button/button';
 export { AccordionComponent } from './lib/accordion/accordion';
@@ -29,8 +30,10 @@ export { DialogService } from './lib/dialog/dialog.service';
 export type { CompsychDialogConfig } from './lib/dialog/dialog.service';
 export { CompsychDialogRef } from './lib/dialog/dialog-ref';
 export { DIALOG_DATA } from '@angular/cdk/dialog';
+export { DropdownComponent } from './lib/dropdown/dropdown';
+export type { DropdownSize, DropdownOption } from './lib/dropdown/dropdown-types';
 export declare class CompsychAngularModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CompsychAngularModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CompsychAngularModule, never, [typeof i1.ButtonComponent, typeof i2.AccordionComponent, typeof i3.FooterComponent, typeof i4.HeaderNavComponent, typeof i5.SidebarComponent, typeof i6.CardComponent, typeof i7.TextInputComponent, typeof i8.DialogComponent], [typeof i1.ButtonComponent, typeof i2.AccordionComponent, typeof i3.FooterComponent, typeof i4.HeaderNavComponent, typeof i5.SidebarComponent, typeof i6.CardComponent, typeof i7.TextInputComponent, typeof i8.DialogComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CompsychAngularModule, never, [typeof i1.ButtonComponent, typeof i2.AccordionComponent, typeof i3.FooterComponent, typeof i4.HeaderNavComponent, typeof i5.SidebarComponent, typeof i6.CardComponent, typeof i7.TextInputComponent, typeof i8.DialogComponent, typeof i9.DropdownComponent], [typeof i1.ButtonComponent, typeof i2.AccordionComponent, typeof i3.FooterComponent, typeof i4.HeaderNavComponent, typeof i5.SidebarComponent, typeof i6.CardComponent, typeof i7.TextInputComponent, typeof i8.DialogComponent, typeof i9.DropdownComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<CompsychAngularModule>;
 }

package/lib/dropdown/dropdown-types.d.ts

@@ -0,0 +1,11 @@
+/** Size variant of a `compsych-dropdown`. Controls trigger height, padding, and font size. */
+export type DropdownSize = 'small' | 'medium' | 'large';
+/** A single selectable option in a `compsych-dropdown`. */
+export interface DropdownOption {
+    /** Value written to the bound form control / emitted by `valueChange`. */
+    value: string;
+    /** Text shown for the option in the panel and, when selected, in the trigger. */
+    label: string;
+    /** Prevents the option from being selected or focused. */
+    disabled?: boolean;
+}