@compsych-ui-components/angular 7.0.27 → 7.0.32

package/esm2022/index.js

@@ -7,6 +7,7 @@ import { SidebarComponent } from './lib/sidebar/sidebar';
 import { CardComponent } from './lib/card-base/card';
 import { TextInputComponent } from './lib/text-input/text-input';
 import { DialogComponent } from './lib/dialog/dialog';
+import { DropdownComponent } from './lib/dropdown/dropdown';
 import * as i0 from "@angular/core";
 export { ButtonComponent } from './lib/button/button';
 export { AccordionComponent } from './lib/accordion/accordion';
@@ -21,6 +22,7 @@ export { DialogService } from './lib/dialog/dialog.service';
 export { CompsychDialogRef } from './lib/dialog/dialog-ref';
 // Re-exported from CDK so opened content components can inject the data token.
 export { DIALOG_DATA } from '@angular/cdk/dialog';
+export { DropdownComponent } from './lib/dropdown/dropdown';
 export class CompsychAngularModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule, imports: [ButtonComponent,
@@ -30,14 +32,16 @@ export class CompsychAngularModule {
             SidebarComponent,
             CardComponent,
             TextInputComponent,
-            DialogComponent], exports: [ButtonComponent,
+            DialogComponent,
+            DropdownComponent], exports: [ButtonComponent,
             AccordionComponent,
             FooterComponent,
             HeaderNavComponent,
             SidebarComponent,
             CardComponent,
             TextInputComponent,
-            DialogComponent] });
+            DialogComponent,
+            DropdownComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CompsychAngularModule, decorators: [{
@@ -52,6 +56,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         CardComponent,
                         TextInputComponent,
                         DialogComponent,
+                        DropdownComponent,
                     ],
                     exports: [
                         ButtonComponent,
@@ -62,6 +67,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         CardComponent,
                         TextInputComponent,
                         DialogComponent,
+                        DropdownComponent,
                     ],
                 }]
         }] });

package/esm2022/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,+EAA+E;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAwBlD,MAAM,OAAO,qBAAqB;wGAArB,qBAAqB;yGAArB,qBAAqB,YApB9B,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,kBAAkB;YAClB,eAAe,aAGf,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,kBAAkB;YAClB,eAAe;yGAGN,qBAAqB;;4FAArB,qBAAqB;kBAtBjC,QAAQ;mBAAC;oBACR,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,kBAAkB;wBAClB,eAAe;qBAChB;oBACD,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,kBAAkB;wBAClB,eAAe;qBAChB;iBACF","sourcesContent":["import { NgModule } from '@angular/core';\r\nimport { ButtonComponent } from './lib/button/button';\r\nimport { AccordionComponent } from './lib/accordion/accordion';\r\nimport { FooterComponent } from './lib/footer/footer';\r\nimport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nimport { SidebarComponent } from './lib/sidebar/sidebar';\r\nimport { CardComponent } from './lib/card-base/card';\r\nimport { TextInputComponent } from './lib/text-input/text-input';\r\nimport { DialogComponent } from './lib/dialog/dialog';\r\n\r\nexport { ButtonComponent } from './lib/button/button';\r\nexport type { ButtonVariant, ButtonSize, ButtonType } from './lib/button/button';\r\nexport { AccordionComponent } from './lib/accordion/accordion';\r\nexport type { AccordionItem, AccordionButton, AccordionVariant, NestedAccordionItem } from './lib/accordion/accordion-types';\r\nexport { FooterComponent } from './lib/footer/footer';\r\nexport type { FooterLink } from './lib/footer/footer';\r\nexport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nexport type { HeaderNavLevel, NavAction } from './lib/header-nav/header-nav';\r\nexport { SidebarComponent } from './lib/sidebar/sidebar';\r\nexport type { SidebarItem } from './lib/sidebar/sidebar';\r\nexport { CardComponent } from './lib/card-base/card';\r\nexport type { CardVariant, CardAppearance, CardRadius, CardPadding, CardOrientation, CardSize, CardHeadingLevel, CardCategoryStyle, CardIconStyle } from './lib/card-base/card';\r\nexport { RippleDirective } from './lib/card-base/ripple.directive';\r\nexport { TextInputComponent } from './lib/text-input/text-input';\r\nexport type { TextInputSize, TextInputType, TextInputLabelButton } from './lib/text-input/text-input';\r\nexport { DialogComponent } from './lib/dialog/dialog';\r\nexport type { DialogCloseReason } from './lib/dialog/dialog';\r\nexport type { DialogVariant } from './lib/dialog/dialog-types';\r\nexport { DialogService } from './lib/dialog/dialog.service';\r\nexport type { CompsychDialogConfig } from './lib/dialog/dialog.service';\r\nexport { CompsychDialogRef } from './lib/dialog/dialog-ref';\r\n// Re-exported from CDK so opened content components can inject the data token.\r\nexport { DIALOG_DATA } from '@angular/cdk/dialog';\r\n\r\n@NgModule({\r\n  imports: [\r\n    ButtonComponent,\r\n    AccordionComponent,\r\n    FooterComponent,\r\n    HeaderNavComponent,\r\n    SidebarComponent,\r\n    CardComponent,\r\n    TextInputComponent,\r\n    DialogComponent,\r\n  ],\r\n  exports: [\r\n    ButtonComponent,\r\n    AccordionComponent,\r\n    FooterComponent,\r\n    HeaderNavComponent,\r\n    SidebarComponent,\r\n    CardComponent,\r\n    TextInputComponent,\r\n    DialogComponent,\r\n  ],\r\n})\r\nexport class CompsychAngularModule {}\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/angular/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,+EAA+E;AAC/E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AA2B5D,MAAM,OAAO,qBAAqB;wGAArB,qBAAqB;yGAArB,qBAAqB,YAtB9B,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,kBAAkB;YAClB,eAAe;YACf,iBAAiB,aAGjB,eAAe;YACf,kBAAkB;YAClB,eAAe;YACf,kBAAkB;YAClB,gBAAgB;YAChB,aAAa;YACb,kBAAkB;YAClB,eAAe;YACf,iBAAiB;yGAGR,qBAAqB;;4FAArB,qBAAqB;kBAxBjC,QAAQ;mBAAC;oBACR,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,kBAAkB;wBAClB,eAAe;wBACf,iBAAiB;qBAClB;oBACD,OAAO,EAAE;wBACP,eAAe;wBACf,kBAAkB;wBAClB,eAAe;wBACf,kBAAkB;wBAClB,gBAAgB;wBAChB,aAAa;wBACb,kBAAkB;wBAClB,eAAe;wBACf,iBAAiB;qBAClB;iBACF","sourcesContent":["import { NgModule } from '@angular/core';\r\nimport { ButtonComponent } from './lib/button/button';\r\nimport { AccordionComponent } from './lib/accordion/accordion';\r\nimport { FooterComponent } from './lib/footer/footer';\r\nimport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nimport { SidebarComponent } from './lib/sidebar/sidebar';\r\nimport { CardComponent } from './lib/card-base/card';\r\nimport { TextInputComponent } from './lib/text-input/text-input';\r\nimport { DialogComponent } from './lib/dialog/dialog';\r\nimport { DropdownComponent } from './lib/dropdown/dropdown';\r\n\r\nexport { ButtonComponent } from './lib/button/button';\r\nexport type { ButtonVariant, ButtonSize, ButtonType } from './lib/button/button';\r\nexport { AccordionComponent } from './lib/accordion/accordion';\r\nexport type { AccordionItem, AccordionButton, AccordionVariant, NestedAccordionItem } from './lib/accordion/accordion-types';\r\nexport { FooterComponent } from './lib/footer/footer';\r\nexport type { FooterLink } from './lib/footer/footer';\r\nexport { HeaderNavComponent } from './lib/header-nav/header-nav';\r\nexport type { HeaderNavLevel, NavAction } from './lib/header-nav/header-nav';\r\nexport { SidebarComponent } from './lib/sidebar/sidebar';\r\nexport type { SidebarItem } from './lib/sidebar/sidebar';\r\nexport { CardComponent } from './lib/card-base/card';\r\nexport type { CardVariant, CardAppearance, CardRadius, CardPadding, CardOrientation, CardSize, CardHeadingLevel, CardCategoryStyle, CardIconStyle } from './lib/card-base/card';\r\nexport { RippleDirective } from './lib/card-base/ripple.directive';\r\nexport { TextInputComponent } from './lib/text-input/text-input';\r\nexport type { TextInputSize, TextInputType, TextInputLabelButton } from './lib/text-input/text-input';\r\nexport { DialogComponent } from './lib/dialog/dialog';\r\nexport type { DialogCloseReason } from './lib/dialog/dialog';\r\nexport type { DialogVariant } from './lib/dialog/dialog-types';\r\nexport { DialogService } from './lib/dialog/dialog.service';\r\nexport type { CompsychDialogConfig } from './lib/dialog/dialog.service';\r\nexport { CompsychDialogRef } from './lib/dialog/dialog-ref';\r\n// Re-exported from CDK so opened content components can inject the data token.\r\nexport { DIALOG_DATA } from '@angular/cdk/dialog';\r\nexport { DropdownComponent } from './lib/dropdown/dropdown';\r\nexport type { DropdownSize, DropdownOption } from './lib/dropdown/dropdown-types';\r\n\r\n@NgModule({\r\n  imports: [\r\n    ButtonComponent,\r\n    AccordionComponent,\r\n    FooterComponent,\r\n    HeaderNavComponent,\r\n    SidebarComponent,\r\n    CardComponent,\r\n    TextInputComponent,\r\n    DialogComponent,\r\n    DropdownComponent,\r\n  ],\r\n  exports: [\r\n    ButtonComponent,\r\n    AccordionComponent,\r\n    FooterComponent,\r\n    HeaderNavComponent,\r\n    SidebarComponent,\r\n    CardComponent,\r\n    TextInputComponent,\r\n    DialogComponent,\r\n    DropdownComponent,\r\n  ],\r\n})\r\nexport class CompsychAngularModule {}\r\n"]}

package/esm2022/lib/dialog/dialog.js

@@ -118,7 +118,7 @@ export class DialogComponent {
             backdropClass: 'cmp-dialog-scrim',
             panelClass: 'cmp-dialog-pane',
             positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
-            scrollStrategy: this.overlay.scrollStrategies.block(),
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
             // Forward the local reading direction so a body-portaled overlay mirrors correctly
             // even when only a subtree (not the document) is RTL.
             direction: this.directionality.value,

package/esm2022/lib/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/dialog/dialog.ts","../../../../../../packages/angular/src/lib/dialog/dialog.html"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  OnDestroy,\r\n  TemplateRef,\r\n  ViewChild,\r\n  ViewContainerRef,\r\n  effect,\r\n  inject,\r\n  input,\r\n  isDevMode,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport { Dialog, DialogRef } from '@angular/cdk/dialog';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\nimport { Overlay } from '@angular/cdk/overlay';\r\nimport { nextDialogIds } from './dialog-id';\r\nimport { DialogSurfaceComponent } from './dialog-surface';\r\nimport { DialogVariant } from './dialog-types';\r\n\r\n/** How a dialog was closed — surfaced by the `closed` output. */\r\nexport type DialogCloseReason = 'programmatic' | 'backdrop' | 'escape' | 'close-button';\r\n\r\n/**\r\n * A themeable modal dialog built on `@angular/cdk/dialog` (centered, scrimmed, focus-trapped).\r\n *\r\n * Figma: Core Components — \"Dialog\" organism (file VFBn7KCDy3FSIlvhNo3ylq, 873:9194).\r\n *\r\n * One component, switched by `variant`:\r\n * - `modal-leading-icon`  — leading icon + title header, projected body, split footer.\r\n * - `modal-centered-icon` — centered icon badge, centered title + description, split footer.\r\n * - `alert`               — compact title + description, right-aligned footer.\r\n *\r\n * Open state is a two-way `[(open)]` model wrapped around the CDK `Dialog` service. The\r\n * CDK dialog container provides `role=\"dialog\"`, `aria-modal`, the focus trap, initial\r\n * focus (`autoFocus: 'dialog'`) and focus restoration. The dialog closes on Escape /\r\n * backdrop click (when `dismissible`); those are handled here so `closed` can report a\r\n * reason. Title/description come from inputs; project the body as default content and each\r\n * action button with the `cmpDialogActions` attribute (the footer lays them out — split\r\n * full-width for modals, right-aligned for alerts).\r\n *\r\n *   <compsych-dialog [(open)]=\"showDialog\" variant=\"modal-leading-icon\"\r\n *     icon=\"globe\" title=\"Update your details\">\r\n *     <p>Body content…</p>\r\n *     <compsych-button cmpDialogActions variant=\"outlined\" fullWidth label=\"Cancel\" (click)=\"showDialog = false\" />\r\n *     <compsych-button cmpDialogActions variant=\"filled\" fullWidth label=\"Save\" (click)=\"save()\" />\r\n *   </compsych-dialog>\r\n *\r\n * Consumers must load `@angular/cdk/overlay-prebuilt.css` (overlay positioning) and the\r\n * `@compsych-ui-components/shared` design tokens globally. The scrim color is injected by\r\n * the dialog itself — no extra stylesheet import is needed.\r\n */\r\n@Component({\r\n  selector: 'compsych-dialog',\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [DialogSurfaceComponent],\r\n  templateUrl: './dialog.html',\r\n  styleUrl: './dialog.css',\r\n  host: { class: 'cmp-dialog-host' },\r\n})\r\nexport class DialogComponent implements OnDestroy {\r\n  /** Two-way open state. Set to `true` to show the dialog, `false` to close it. */\r\n  readonly open = model<boolean>(false);\r\n  /** Layout type. Defaults to `modal-leading-icon`. */\r\n  readonly variant = input<DialogVariant>('modal-leading-icon');\r\n  /**\r\n   * Optional width override — any CSS length (e.g. `'1000px'`). Defaults to the variant\r\n   * width (800px modal / 600px alert). Always clamped to the viewport on small screens.\r\n   */\r\n  readonly width = input<string>('');\r\n  /** Heading text. Also drives the accessible name via `aria-labelledby`. */\r\n  readonly title = input<string>('');\r\n  /** Supporting text under the title (rendered for `centered` and `alert` variants). */\r\n  readonly description = input<string>('');\r\n  /** Lucide icon name — the leading header icon (`leading`) or centered badge glyph (`centered`). */\r\n  readonly icon = input<string>('');\r\n  /**\r\n   * When true (default) the dialog shows a close button and closes on Escape / backdrop click.\r\n   * When false, the dialog is a forced choice — provide a focusable action (e.g. a\r\n   * `[cmpDialogActions]` button) so keyboard users can dismiss it (WCAG 2.1.2, no keyboard trap).\r\n   */\r\n  readonly dismissible = input<boolean>(true);\r\n  /** Accessible label for the close button. */\r\n  readonly closeLabel = input<string>('Close dialog');\r\n  /** Accessible name used when no `title` is provided (e.g. a fully custom body). */\r\n  readonly ariaLabel = input<string>('');\r\n  /** Renders the action footer. Set false to hide it when there are no actions. */\r\n  readonly showActions = input<boolean>(true);\r\n\r\n  /** Emits after the dialog has been opened and shown. */\r\n  readonly opened = output<void>();\r\n  /** Emits after the dialog has closed, with the reason it closed. */\r\n  readonly closed = output<DialogCloseReason>();\r\n\r\n  /** The dialog surface template, projected into the CDK dialog container when open. */\r\n  @ViewChild('panel', { static: true }) private panelTemplate!: TemplateRef<unknown>;\r\n\r\n  private readonly dialog = inject(Dialog);\r\n  private readonly overlay = inject(Overlay);\r\n  private readonly directionality = inject(Directionality);\r\n  private readonly viewContainerRef = inject(ViewContainerRef);\r\n\r\n  private dialogRef?: DialogRef<unknown, unknown>;\r\n  private closeReason: DialogCloseReason = 'programmatic';\r\n\r\n  private readonly _ids = nextDialogIds();\r\n  protected readonly titleId = this._ids.titleId;\r\n  protected readonly descId = this._ids.descId;\r\n\r\n  constructor() {\r\n    // Reflect the open model onto the CDK dialog lifecycle.\r\n    effect(() => {\r\n      if (this.open() && !this.dialogRef) {\r\n        this.attach();\r\n      } else if (!this.open() && this.dialogRef) {\r\n        this.detach();\r\n      }\r\n    });\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.dialogRef?.close();\r\n  }\r\n\r\n  /** Close request from the close button. */\r\n  protected requestClose(): void {\r\n    this.closeWith('close-button');\r\n  }\r\n\r\n  private closeWith(reason: DialogCloseReason): void {\r\n    if (!this.open()) {\r\n      return;\r\n    }\r\n    this.closeReason = reason;\r\n    this.open.set(false);\r\n  }\r\n\r\n  private attach(): void {\r\n    this.closeReason = 'programmatic';\r\n\r\n    // Dev-only guardrail: a dialog with no title and no ariaLabel has no accessible\r\n    // name (WCAG 2.2 §4.1.2). Stripped from production builds by isDevMode().\r\n    if (isDevMode() && !this.title() && !this.ariaLabel()) {\r\n      console.warn(\r\n        '[compsych-dialog] Opened with no accessible name — set `title` or `ariaLabel` ' +\r\n          'so assistive technology can identify the dialog (WCAG 2.2 §4.1.2).',\r\n      );\r\n    }\r\n\r\n    const ref = this.dialog.open(this.panelTemplate, {\r\n      viewContainerRef: this.viewContainerRef,\r\n      hasBackdrop: true,\r\n      // Scrim color is injected by the dialog surface itself; positioning/fade come from\r\n      // @angular/cdk/overlay-prebuilt.css (which consumers load).\r\n      backdropClass: 'cmp-dialog-scrim',\r\n      panelClass: 'cmp-dialog-pane',\r\n      positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\r\n      scrollStrategy: this.overlay.scrollStrategies.block(),\r\n      // Forward the local reading direction so a body-portaled overlay mirrors correctly\r\n      // even when only a subtree (not the document) is RTL.\r\n      direction: this.directionality.value,\r\n      // The `alert` variant is a decision/confirmation dialog → assertive alertdialog role.\r\n      role: this.variant() === 'alert' ? 'alertdialog' : 'dialog',\r\n      // We handle Escape / backdrop ourselves so `closed` can report a reason.\r\n      disableClose: true,\r\n      // Focus the dialog container on open (screen reader announces it; first Tab then\r\n      // lands on the close button with its visible ring) and restore focus on close.\r\n      autoFocus: 'dialog',\r\n      restoreFocus: true,\r\n      ariaModal: true,\r\n      ariaLabelledBy: this.title() ? this.titleId : null,\r\n      ariaDescribedBy:\r\n        this.variant() !== 'modal-leading-icon' && this.description() ? this.descId : null,\r\n      // Accessible name for the no-title custom-body case (CDK nulls aria-labelledby when set).\r\n      ariaLabel: !this.title() ? this.ariaLabel() || null : null,\r\n    });\r\n    this.dialogRef = ref;\r\n\r\n    ref.backdropClick.subscribe(() => {\r\n      if (this.dismissible()) {\r\n        this.closeWith('backdrop');\r\n      }\r\n    });\r\n    ref.keydownEvents.subscribe((event) => {\r\n      if (event.key === 'Escape' && this.dismissible()) {\r\n        event.preventDefault();\r\n        this.closeWith('escape');\r\n      }\r\n    });\r\n    ref.closed.subscribe(() => {\r\n      this.dialogRef = undefined;\r\n      const reason = this.closeReason;\r\n      this.closeReason = 'programmatic';\r\n      // Keep the model in sync if the dialog was torn down by CDK rather than the model.\r\n      if (this.open()) {\r\n        this.open.set(false);\r\n      }\r\n      this.closed.emit(reason);\r\n    });\r\n\r\n    this.opened.emit();\r\n  }\r\n\r\n  private detach(): void {\r\n    // Triggers `ref.closed`, which clears state, restores focus, and emits `closed`.\r\n    this.dialogRef?.close();\r\n  }\r\n}\r\n","<ng-template #panel>\r\n  <cmp-dialog-surface\r\n    [variant]=\"variant()\"\r\n    [width]=\"width()\"\r\n    [title]=\"title()\"\r\n    [description]=\"description()\"\r\n    [icon]=\"icon()\"\r\n    [dismissible]=\"dismissible()\"\r\n    [closeLabel]=\"closeLabel()\"\r\n    [showActions]=\"showActions()\"\r\n    [titleId]=\"titleId\"\r\n    [descId]=\"descId\"\r\n    (closeClick)=\"requestClose()\"\r\n  >\r\n    <ng-content />\r\n    <ng-content select=\"[cmpDialogActions]\" ngProjectAs=\"[cmpDialogActions]\" />\r\n  </cmp-dialog-surface>\r\n</ng-template>\r\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/dialog/dialog.ts","../../../../../../packages/angular/src/lib/dialog/dialog.html"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  OnDestroy,\r\n  TemplateRef,\r\n  ViewChild,\r\n  ViewContainerRef,\r\n  effect,\r\n  inject,\r\n  input,\r\n  isDevMode,\r\n  model,\r\n  output,\r\n} from '@angular/core';\r\nimport { Dialog, DialogRef } from '@angular/cdk/dialog';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\nimport { Overlay } from '@angular/cdk/overlay';\r\nimport { nextDialogIds } from './dialog-id';\r\nimport { DialogSurfaceComponent } from './dialog-surface';\r\nimport { DialogVariant } from './dialog-types';\r\n\r\n/** How a dialog was closed — surfaced by the `closed` output. */\r\nexport type DialogCloseReason = 'programmatic' | 'backdrop' | 'escape' | 'close-button';\r\n\r\n/**\r\n * A themeable modal dialog built on `@angular/cdk/dialog` (centered, scrimmed, focus-trapped).\r\n *\r\n * Figma: Core Components — \"Dialog\" organism (file VFBn7KCDy3FSIlvhNo3ylq, 873:9194).\r\n *\r\n * One component, switched by `variant`:\r\n * - `modal-leading-icon`  — leading icon + title header, projected body, split footer.\r\n * - `modal-centered-icon` — centered icon badge, centered title + description, split footer.\r\n * - `alert`               — compact title + description, right-aligned footer.\r\n *\r\n * Open state is a two-way `[(open)]` model wrapped around the CDK `Dialog` service. The\r\n * CDK dialog container provides `role=\"dialog\"`, `aria-modal`, the focus trap, initial\r\n * focus (`autoFocus: 'dialog'`) and focus restoration. The dialog closes on Escape /\r\n * backdrop click (when `dismissible`); those are handled here so `closed` can report a\r\n * reason. Title/description come from inputs; project the body as default content and each\r\n * action button with the `cmpDialogActions` attribute (the footer lays them out — split\r\n * full-width for modals, right-aligned for alerts).\r\n *\r\n *   <compsych-dialog [(open)]=\"showDialog\" variant=\"modal-leading-icon\"\r\n *     icon=\"globe\" title=\"Update your details\">\r\n *     <p>Body content…</p>\r\n *     <compsych-button cmpDialogActions variant=\"outlined\" fullWidth label=\"Cancel\" (click)=\"showDialog = false\" />\r\n *     <compsych-button cmpDialogActions variant=\"filled\" fullWidth label=\"Save\" (click)=\"save()\" />\r\n *   </compsych-dialog>\r\n *\r\n * Consumers must load `@angular/cdk/overlay-prebuilt.css` (overlay positioning) and the\r\n * `@compsych-ui-components/shared` design tokens globally. The scrim color is injected by\r\n * the dialog itself — no extra stylesheet import is needed.\r\n */\r\n@Component({\r\n  selector: 'compsych-dialog',\r\n  standalone: true,\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  imports: [DialogSurfaceComponent],\r\n  templateUrl: './dialog.html',\r\n  styleUrl: './dialog.css',\r\n  host: { class: 'cmp-dialog-host' },\r\n})\r\nexport class DialogComponent implements OnDestroy {\r\n  /** Two-way open state. Set to `true` to show the dialog, `false` to close it. */\r\n  readonly open = model<boolean>(false);\r\n  /** Layout type. Defaults to `modal-leading-icon`. */\r\n  readonly variant = input<DialogVariant>('modal-leading-icon');\r\n  /**\r\n   * Optional width override — any CSS length (e.g. `'1000px'`). Defaults to the variant\r\n   * width (800px modal / 600px alert). Always clamped to the viewport on small screens.\r\n   */\r\n  readonly width = input<string>('');\r\n  /** Heading text. Also drives the accessible name via `aria-labelledby`. */\r\n  readonly title = input<string>('');\r\n  /** Supporting text under the title (rendered for `centered` and `alert` variants). */\r\n  readonly description = input<string>('');\r\n  /** Lucide icon name — the leading header icon (`leading`) or centered badge glyph (`centered`). */\r\n  readonly icon = input<string>('');\r\n  /**\r\n   * When true (default) the dialog shows a close button and closes on Escape / backdrop click.\r\n   * When false, the dialog is a forced choice — provide a focusable action (e.g. a\r\n   * `[cmpDialogActions]` button) so keyboard users can dismiss it (WCAG 2.1.2, no keyboard trap).\r\n   */\r\n  readonly dismissible = input<boolean>(true);\r\n  /** Accessible label for the close button. */\r\n  readonly closeLabel = input<string>('Close dialog');\r\n  /** Accessible name used when no `title` is provided (e.g. a fully custom body). */\r\n  readonly ariaLabel = input<string>('');\r\n  /** Renders the action footer. Set false to hide it when there are no actions. */\r\n  readonly showActions = input<boolean>(true);\r\n\r\n  /** Emits after the dialog has been opened and shown. */\r\n  readonly opened = output<void>();\r\n  /** Emits after the dialog has closed, with the reason it closed. */\r\n  readonly closed = output<DialogCloseReason>();\r\n\r\n  /** The dialog surface template, projected into the CDK dialog container when open. */\r\n  @ViewChild('panel', { static: true }) private panelTemplate!: TemplateRef<unknown>;\r\n\r\n  private readonly dialog = inject(Dialog);\r\n  private readonly overlay = inject(Overlay);\r\n  private readonly directionality = inject(Directionality);\r\n  private readonly viewContainerRef = inject(ViewContainerRef);\r\n\r\n  private dialogRef?: DialogRef<unknown, unknown>;\r\n  private closeReason: DialogCloseReason = 'programmatic';\r\n\r\n  private readonly _ids = nextDialogIds();\r\n  protected readonly titleId = this._ids.titleId;\r\n  protected readonly descId = this._ids.descId;\r\n\r\n  constructor() {\r\n    // Reflect the open model onto the CDK dialog lifecycle.\r\n    effect(() => {\r\n      if (this.open() && !this.dialogRef) {\r\n        this.attach();\r\n      } else if (!this.open() && this.dialogRef) {\r\n        this.detach();\r\n      }\r\n    });\r\n  }\r\n\r\n  ngOnDestroy(): void {\r\n    this.dialogRef?.close();\r\n  }\r\n\r\n  /** Close request from the close button. */\r\n  protected requestClose(): void {\r\n    this.closeWith('close-button');\r\n  }\r\n\r\n  private closeWith(reason: DialogCloseReason): void {\r\n    if (!this.open()) {\r\n      return;\r\n    }\r\n    this.closeReason = reason;\r\n    this.open.set(false);\r\n  }\r\n\r\n  private attach(): void {\r\n    this.closeReason = 'programmatic';\r\n\r\n    // Dev-only guardrail: a dialog with no title and no ariaLabel has no accessible\r\n    // name (WCAG 2.2 §4.1.2). Stripped from production builds by isDevMode().\r\n    if (isDevMode() && !this.title() && !this.ariaLabel()) {\r\n      console.warn(\r\n        '[compsych-dialog] Opened with no accessible name — set `title` or `ariaLabel` ' +\r\n          'so assistive technology can identify the dialog (WCAG 2.2 §4.1.2).',\r\n      );\r\n    }\r\n\r\n    const ref = this.dialog.open(this.panelTemplate, {\r\n      viewContainerRef: this.viewContainerRef,\r\n      hasBackdrop: true,\r\n      // Scrim color is injected by the dialog surface itself; positioning/fade come from\r\n      // @angular/cdk/overlay-prebuilt.css (which consumers load).\r\n      backdropClass: 'cmp-dialog-scrim',\r\n      panelClass: 'cmp-dialog-pane',\r\n      positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\r\n      scrollStrategy: this.overlay.scrollStrategies.noop(),\r\n      // Forward the local reading direction so a body-portaled overlay mirrors correctly\r\n      // even when only a subtree (not the document) is RTL.\r\n      direction: this.directionality.value,\r\n      // The `alert` variant is a decision/confirmation dialog → assertive alertdialog role.\r\n      role: this.variant() === 'alert' ? 'alertdialog' : 'dialog',\r\n      // We handle Escape / backdrop ourselves so `closed` can report a reason.\r\n      disableClose: true,\r\n      // Focus the dialog container on open (screen reader announces it; first Tab then\r\n      // lands on the close button with its visible ring) and restore focus on close.\r\n      autoFocus: 'dialog',\r\n      restoreFocus: true,\r\n      ariaModal: true,\r\n      ariaLabelledBy: this.title() ? this.titleId : null,\r\n      ariaDescribedBy:\r\n        this.variant() !== 'modal-leading-icon' && this.description() ? this.descId : null,\r\n      // Accessible name for the no-title custom-body case (CDK nulls aria-labelledby when set).\r\n      ariaLabel: !this.title() ? this.ariaLabel() || null : null,\r\n    });\r\n    this.dialogRef = ref;\r\n\r\n    ref.backdropClick.subscribe(() => {\r\n      if (this.dismissible()) {\r\n        this.closeWith('backdrop');\r\n      }\r\n    });\r\n    ref.keydownEvents.subscribe((event) => {\r\n      if (event.key === 'Escape' && this.dismissible()) {\r\n        event.preventDefault();\r\n        this.closeWith('escape');\r\n      }\r\n    });\r\n    ref.closed.subscribe(() => {\r\n      this.dialogRef = undefined;\r\n      const reason = this.closeReason;\r\n      this.closeReason = 'programmatic';\r\n      // Keep the model in sync if the dialog was torn down by CDK rather than the model.\r\n      if (this.open()) {\r\n        this.open.set(false);\r\n      }\r\n      this.closed.emit(reason);\r\n    });\r\n\r\n    this.opened.emit();\r\n  }\r\n\r\n  private detach(): void {\r\n    // Triggers `ref.closed`, which clears state, restores focus, and emits `closed`.\r\n    this.dialogRef?.close();\r\n  }\r\n}\r\n","<ng-template #panel>\r\n  <cmp-dialog-surface\r\n    [variant]=\"variant()\"\r\n    [width]=\"width()\"\r\n    [title]=\"title()\"\r\n    [description]=\"description()\"\r\n    [icon]=\"icon()\"\r\n    [dismissible]=\"dismissible()\"\r\n    [closeLabel]=\"closeLabel()\"\r\n    [showActions]=\"showActions()\"\r\n    [titleId]=\"titleId\"\r\n    [descId]=\"descId\"\r\n    (closeClick)=\"requestClose()\"\r\n  >\r\n    <ng-content />\r\n    <ng-content select=\"[cmpDialogActions]\" ngProjectAs=\"[cmpDialogActions]\" />\r\n  </cmp-dialog-surface>\r\n</ng-template>\r\n"]}

package/esm2022/lib/dialog/dialog.service.js

@@ -60,7 +60,7 @@ export class DialogService {
             backdropClass: 'cmp-dialog-scrim',
             panelClass: config.panelClass ?? 'cmp-dialog-pane',
             positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
-            scrollStrategy: this.overlay.scrollStrategies.block(),
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
             direction: this.directionality.value,
             role: chrome.variant === 'alert' ? 'alertdialog' : 'dialog',
             // dismissible → CDK closes on Escape / backdrop; non-dismissible → forced choice.

package/esm2022/lib/dialog/dialog.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.service.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/dialog/dialog.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { Injectable, TemplateRef, Type, inject, isDevMode } from '@angular/core';\r\nimport { Dialog, DialogConfig, DialogRef } from '@angular/cdk/dialog';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\nimport { Overlay } from '@angular/cdk/overlay';\r\nimport { CMP_DIALOG_CHROME, CmpDialogContainer, DialogChrome } from './dialog-container';\r\nimport { nextDialogIds } from './dialog-id';\r\nimport { CompsychDialogRef } from './dialog-ref';\r\nimport { DialogVariant } from './dialog-types';\r\n\r\n/** Configuration for {@link DialogService.open}. */\r\nexport interface CompsychDialogConfig<D = unknown> {\r\n  /** Layout type. Defaults to `modal-leading-icon`. */\r\n  variant?: DialogVariant;\r\n  /** Heading text (drives the accessible name via `aria-labelledby`). */\r\n  title?: string;\r\n  /** Supporting text (rendered for `centered` / `alert` variants). */\r\n  description?: string;\r\n  /** Lucide icon name (leading header icon / centered badge glyph). */\r\n  icon?: string;\r\n  /** When true (default) shows a close button and closes on Escape / backdrop click. */\r\n  dismissible?: boolean;\r\n  /** Accessible label for the close button. */\r\n  closeLabel?: string;\r\n  /** Accessible name used when no `title` is provided. */\r\n  ariaLabel?: string;\r\n  /** Width override — any CSS length. Defaults to the variant width, viewport-clamped. */\r\n  width?: string;\r\n  /** Whether to render the projected actions footer. */\r\n  showActions?: boolean;\r\n  /** Data injected into the opened component via the CDK `DIALOG_DATA` token. */\r\n  data?: D;\r\n  /** Extra class(es) for the overlay pane. */\r\n  panelClass?: string | string[];\r\n}\r\n\r\n/**\r\n * Opens a component or template as a modal dialog inside the compsych-dialog chrome,\r\n * imperatively (like Angular Material's `MatDialog`). Built on `@angular/cdk/dialog`.\r\n *\r\n * The opened content is placed in the dialog body; the header (icon/title/close) and\r\n * behavior come from the config. The opened component can inject the CDK `DialogRef`\r\n * (to close, optionally with a result) and `DIALOG_DATA` (to read `config.data`) — both\r\n * re-exported from `@compsych-ui-components/angular`.\r\n *\r\n *   const ref = dialogService.open(MyComponent, {\r\n *     title: 'Edit details', variant: 'modal-leading-icon', icon: 'globe', data: { id },\r\n *   });\r\n *   ref.closed.subscribe((result) => { ... });\r\n *\r\n * Requires `@angular/cdk/overlay-prebuilt.css` + the `@compsych-ui-components/shared` tokens\r\n * loaded globally. The scrim color is injected by the dialog — no extra stylesheet needed.\r\n */\r\n@Injectable({ providedIn: 'root' })\r\nexport class DialogService {\r\n  private readonly dialog = inject(Dialog);\r\n  private readonly overlay = inject(Overlay);\r\n  private readonly directionality = inject(Directionality);\r\n\r\n  /** Opens `content` as a modal dialog. Returns a {@link CompsychDialogRef} (close / closed). */\r\n  open<R = unknown, D = unknown, C = unknown>(\r\n    content: Type<C> | TemplateRef<C>,\r\n    config: CompsychDialogConfig<D> = {},\r\n  ): CompsychDialogRef<R> {\r\n    // Dev-only guardrail (parity with the declarative component): no title + no ariaLabel\r\n    // means the dialog has no accessible name (WCAG 2.2 §4.1.2).\r\n    if (isDevMode() && !config.title && !config.ariaLabel) {\r\n      console.warn(\r\n        '[compsych-dialog] Opened via DialogService with no accessible name — set `title` ' +\r\n          'or `ariaLabel` so assistive technology can identify the dialog (WCAG 2.2 §4.1.2).',\r\n      );\r\n    }\r\n\r\n    const ids = nextDialogIds();\r\n    const chrome: DialogChrome = {\r\n      variant: config.variant ?? 'modal-leading-icon',\r\n      title: config.title ?? '',\r\n      description: config.description ?? '',\r\n      icon: config.icon ?? '',\r\n      dismissible: config.dismissible ?? true,\r\n      closeLabel: config.closeLabel ?? 'Close dialog',\r\n      width: config.width ?? '',\r\n      showActions: config.showActions ?? true,\r\n      titleId: ids.titleId,\r\n      descId: ids.descId,\r\n    };\r\n\r\n    let ref: CompsychDialogRef<R> | undefined;\r\n    const cdkConfig = {\r\n      // Object form so chrome params reach the container via DI (not spread onto the\r\n      // config, which would clobber real fields like `width`).\r\n      container: {\r\n        type: CmpDialogContainer,\r\n        providers: () => [{ provide: CMP_DIALOG_CHROME, useValue: chrome }],\r\n      },\r\n      hasBackdrop: true,\r\n      backdropClass: 'cmp-dialog-scrim',\r\n      panelClass: config.panelClass ?? 'cmp-dialog-pane',\r\n      positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\r\n      scrollStrategy: this.overlay.scrollStrategies.block(),\r\n      direction: this.directionality.value,\r\n      role: chrome.variant === 'alert' ? ('alertdialog' as const) : ('dialog' as const),\r\n      // dismissible → CDK closes on Escape / backdrop; non-dismissible → forced choice.\r\n      disableClose: !chrome.dismissible,\r\n      autoFocus: 'dialog',\r\n      restoreFocus: true,\r\n      ariaModal: true,\r\n      ariaLabelledBy: chrome.title ? chrome.titleId : null,\r\n      ariaDescribedBy:\r\n        chrome.variant !== 'modal-leading-icon' && chrome.description ? chrome.descId : null,\r\n      ariaLabel: !chrome.title ? config.ariaLabel || null : null,\r\n      data: config.data,\r\n      // Wrap the CDK ref (async-safe `closed`) and expose it to the opened content via DI,\r\n      // so the content can inject `CompsychDialogRef` to close with a result.\r\n      providers: (cdkRef: DialogRef<R, C>) => {\r\n        ref = new CompsychDialogRef<R>(cdkRef as DialogRef<R, unknown>);\r\n        return [{ provide: CompsychDialogRef, useValue: ref }];\r\n      },\r\n    } as DialogConfig<D, DialogRef<R, C>>;\r\n\r\n    const cdkRef = this.dialog.open<R, D, C>(content, cdkConfig);\r\n    // `providers` runs synchronously during open(), so `ref` is set; fall back defensively.\r\n    return ref ?? new CompsychDialogRef<R>(cdkRef as DialogRef<R, unknown>);\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dialog.service.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/dialog/dialog.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { Injectable, TemplateRef, Type, inject, isDevMode } from '@angular/core';\r\nimport { Dialog, DialogConfig, DialogRef } from '@angular/cdk/dialog';\r\nimport { Directionality } from '@angular/cdk/bidi';\r\nimport { Overlay } from '@angular/cdk/overlay';\r\nimport { CMP_DIALOG_CHROME, CmpDialogContainer, DialogChrome } from './dialog-container';\r\nimport { nextDialogIds } from './dialog-id';\r\nimport { CompsychDialogRef } from './dialog-ref';\r\nimport { DialogVariant } from './dialog-types';\r\n\r\n/** Configuration for {@link DialogService.open}. */\r\nexport interface CompsychDialogConfig<D = unknown> {\r\n  /** Layout type. Defaults to `modal-leading-icon`. */\r\n  variant?: DialogVariant;\r\n  /** Heading text (drives the accessible name via `aria-labelledby`). */\r\n  title?: string;\r\n  /** Supporting text (rendered for `centered` / `alert` variants). */\r\n  description?: string;\r\n  /** Lucide icon name (leading header icon / centered badge glyph). */\r\n  icon?: string;\r\n  /** When true (default) shows a close button and closes on Escape / backdrop click. */\r\n  dismissible?: boolean;\r\n  /** Accessible label for the close button. */\r\n  closeLabel?: string;\r\n  /** Accessible name used when no `title` is provided. */\r\n  ariaLabel?: string;\r\n  /** Width override — any CSS length. Defaults to the variant width, viewport-clamped. */\r\n  width?: string;\r\n  /** Whether to render the projected actions footer. */\r\n  showActions?: boolean;\r\n  /** Data injected into the opened component via the CDK `DIALOG_DATA` token. */\r\n  data?: D;\r\n  /** Extra class(es) for the overlay pane. */\r\n  panelClass?: string | string[];\r\n}\r\n\r\n/**\r\n * Opens a component or template as a modal dialog inside the compsych-dialog chrome,\r\n * imperatively (like Angular Material's `MatDialog`). Built on `@angular/cdk/dialog`.\r\n *\r\n * The opened content is placed in the dialog body; the header (icon/title/close) and\r\n * behavior come from the config. The opened component can inject the CDK `DialogRef`\r\n * (to close, optionally with a result) and `DIALOG_DATA` (to read `config.data`) — both\r\n * re-exported from `@compsych-ui-components/angular`.\r\n *\r\n *   const ref = dialogService.open(MyComponent, {\r\n *     title: 'Edit details', variant: 'modal-leading-icon', icon: 'globe', data: { id },\r\n *   });\r\n *   ref.closed.subscribe((result) => { ... });\r\n *\r\n * Requires `@angular/cdk/overlay-prebuilt.css` + the `@compsych-ui-components/shared` tokens\r\n * loaded globally. The scrim color is injected by the dialog — no extra stylesheet needed.\r\n */\r\n@Injectable({ providedIn: 'root' })\r\nexport class DialogService {\r\n  private readonly dialog = inject(Dialog);\r\n  private readonly overlay = inject(Overlay);\r\n  private readonly directionality = inject(Directionality);\r\n\r\n  /** Opens `content` as a modal dialog. Returns a {@link CompsychDialogRef} (close / closed). */\r\n  open<R = unknown, D = unknown, C = unknown>(\r\n    content: Type<C> | TemplateRef<C>,\r\n    config: CompsychDialogConfig<D> = {},\r\n  ): CompsychDialogRef<R> {\r\n    // Dev-only guardrail (parity with the declarative component): no title + no ariaLabel\r\n    // means the dialog has no accessible name (WCAG 2.2 §4.1.2).\r\n    if (isDevMode() && !config.title && !config.ariaLabel) {\r\n      console.warn(\r\n        '[compsych-dialog] Opened via DialogService with no accessible name — set `title` ' +\r\n          'or `ariaLabel` so assistive technology can identify the dialog (WCAG 2.2 §4.1.2).',\r\n      );\r\n    }\r\n\r\n    const ids = nextDialogIds();\r\n    const chrome: DialogChrome = {\r\n      variant: config.variant ?? 'modal-leading-icon',\r\n      title: config.title ?? '',\r\n      description: config.description ?? '',\r\n      icon: config.icon ?? '',\r\n      dismissible: config.dismissible ?? true,\r\n      closeLabel: config.closeLabel ?? 'Close dialog',\r\n      width: config.width ?? '',\r\n      showActions: config.showActions ?? true,\r\n      titleId: ids.titleId,\r\n      descId: ids.descId,\r\n    };\r\n\r\n    let ref: CompsychDialogRef<R> | undefined;\r\n    const cdkConfig = {\r\n      // Object form so chrome params reach the container via DI (not spread onto the\r\n      // config, which would clobber real fields like `width`).\r\n      container: {\r\n        type: CmpDialogContainer,\r\n        providers: () => [{ provide: CMP_DIALOG_CHROME, useValue: chrome }],\r\n      },\r\n      hasBackdrop: true,\r\n      backdropClass: 'cmp-dialog-scrim',\r\n      panelClass: config.panelClass ?? 'cmp-dialog-pane',\r\n      positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\r\n      scrollStrategy: this.overlay.scrollStrategies.noop(),\r\n      direction: this.directionality.value,\r\n      role: chrome.variant === 'alert' ? ('alertdialog' as const) : ('dialog' as const),\r\n      // dismissible → CDK closes on Escape / backdrop; non-dismissible → forced choice.\r\n      disableClose: !chrome.dismissible,\r\n      autoFocus: 'dialog',\r\n      restoreFocus: true,\r\n      ariaModal: true,\r\n      ariaLabelledBy: chrome.title ? chrome.titleId : null,\r\n      ariaDescribedBy:\r\n        chrome.variant !== 'modal-leading-icon' && chrome.description ? chrome.descId : null,\r\n      ariaLabel: !chrome.title ? config.ariaLabel || null : null,\r\n      data: config.data,\r\n      // Wrap the CDK ref (async-safe `closed`) and expose it to the opened content via DI,\r\n      // so the content can inject `CompsychDialogRef` to close with a result.\r\n      providers: (cdkRef: DialogRef<R, C>) => {\r\n        ref = new CompsychDialogRef<R>(cdkRef as DialogRef<R, unknown>);\r\n        return [{ provide: CompsychDialogRef, useValue: ref }];\r\n      },\r\n    } as DialogConfig<D, DialogRef<R, C>>;\r\n\r\n    const cdkRef = this.dialog.open<R, D, C>(content, cdkConfig);\r\n    // `providers` runs synchronously during open(), so `ref` is set; fall back defensively.\r\n    return ref ?? new CompsychDialogRef<R>(cdkRef as DialogRef<R, unknown>);\r\n  }\r\n}\r\n"]}

package/esm2022/lib/dropdown/dropdown-types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dropdown-types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-types.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/dropdown/dropdown-types.ts"],"names":[],"mappings":"","sourcesContent":["/** Size variant of a `compsych-dropdown`. Controls trigger height, padding, and font size. */\r\nexport type DropdownSize = 'small' | 'medium' | 'large';\r\n\r\n/** A single selectable option in a `compsych-dropdown`. */\r\nexport interface DropdownOption {\r\n  /** Value written to the bound form control / emitted by `valueChange`. */\r\n  value: string;\r\n  /** Text shown for the option in the panel and, when selected, in the trigger. */\r\n  label: string;\r\n  /** Prevents the option from being selected or focused. */\r\n  disabled?: boolean;\r\n}\r\n"]}

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;
+}

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.27",
+  "version": "7.0.32",
   "description": "Angular UI components for compsych",
   "publishConfig": {
     "access": "public",