@compsych-ui-components/angular 4.0.19 → 5.0.0

package/lib/header-nav/header-nav.d.ts

@@ -0,0 +1,90 @@
+import { EventEmitter } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { ButtonVariant } from '../button/button';
+import * as i0 from "@angular/core";
+export type HeaderNavLevel = 'main' | 'sub-page' | 'not-logged';
+/**
+ * A navigation item used for both breadcrumbs and action buttons.
+ * Use `id` to identify which item was clicked in the parent's `action` handler.
+ * - Breadcrumb: provide `id` and `label`.
+ * - Action button: provide `id`, `label`, and `variant`.
+ */
+export interface NavAction {
+    id: string;
+    label: string;
+    variant?: ButtonVariant;
+}
+/**
+ * Header Navigation — top app bar from the ComPsych Design System.
+ *
+ * Three levels × sidebar-open state:
+ * - `main`       — menu toggle, brand logo + wordmark, logged-in action cluster.
+ * - `sub-page`   — menu toggle, logo mark + breadcrumb trail, logged-in action cluster.
+ * - `not-logged` — menu toggle, brand, public action cluster (language, help, CTA).
+ *
+ * Pass `breadcrumbs` as an ordered list of `NavAction` items. The last item is
+ * rendered as the current-page indicator (non-interactive); all others are
+ * buttons that emit `action` with `{ type: 'breadcrumb', item }` on click.
+ * Use `item.id` in the handler to identify which crumb was clicked.
+ */
+export declare class HeaderNavComponent {
+    private readonly sanitizer;
+    /** Which header level to render. */
+    level: HeaderNavLevel;
+    /** Whether the paired sidebar is open — toggles the menu icon (☰ ↔ ✕). */
+    sidebarOpen: boolean;
+    /** Brand wordmark text shown on `main` and `not-logged` levels. */
+    brandLabel: string;
+    /**
+     * Ordered breadcrumb trail for `sub-page` level.
+     * Each item requires an `id` and `label`. The last item is rendered as the
+     * current page (non-interactive); all others emit `{ type: 'breadcrumb', item }`.
+     */
+    breadcrumbs: NavAction[];
+    /** Notification badge count. Badge is hidden when 0. */
+    notificationCount: number;
+    /** Avatar initials for the logged-in user. */
+    avatarInitials: string;
+    /** Show the search icon button (logged-in levels). */
+    showSearch: boolean;
+    /** Show the notifications icon button (logged-in levels). */
+    showNotifications: boolean;
+    /** Show the documents icon button (logged-in levels). */
+    showDocuments: boolean;
+    /** Show the avatar button (logged-in levels). */
+    showAvatar: boolean;
+    /** Show the language icon button (not-logged level). */
+    showLanguage: boolean;
+    /** Show the help icon button (not-logged level). */
+    showHelp: boolean;
+    /**
+     * Additional configurable buttons rendered in the actions area.
+     * Each entry is `{ id, label, variant? }` where `variant` is a `ButtonVariant`
+     * (defaults to `'filled'`) and `id` is a required stable identifier.
+     * Clicking any of these emits `action` with `{ type: 'action-button', item }`.
+     */
+    actionButtons: NavAction[];
+    /** Emitted for every interactive element. Emits a string id: the `NavAction` id for breadcrumb/action-button, or the action name for icon buttons. */
+    readonly action: EventEmitter<string>;
+    readonly searchIconSvg: SafeHtml;
+    readonly bellIconSvg: SafeHtml;
+    readonly fileTextIconSvg: SafeHtml;
+    readonly globeIconSvg: SafeHtml;
+    readonly helpIconSvg: SafeHtml;
+    constructor(sanitizer: DomSanitizer);
+    get isLoggedOut(): boolean;
+    get isSubPage(): boolean;
+    get menuIconSvg(): SafeHtml;
+    get badgeText(): string;
+    get notificationAriaLabel(): string;
+    /**
+     * Looks up a Lucide icon by name and injects explicit width/height attributes
+     * (20 × 20) so the SVG renders at the correct size when injected via [innerHTML].
+     * Angular's CSS encapsulation does not add _ngcontent attributes to dynamically
+     * injected content, so CSS descendant selectors targeting `svg` would not apply —
+     * explicit SVG attributes are the reliable solution.
+     */
+    private trustedIcon;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeaderNavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderNavComponent, "compsych-header-nav", never, { "level": { "alias": "level"; "required": false; }; "sidebarOpen": { "alias": "sidebarOpen"; "required": false; }; "brandLabel": { "alias": "brandLabel"; "required": false; }; "breadcrumbs": { "alias": "breadcrumbs"; "required": false; }; "notificationCount": { "alias": "notificationCount"; "required": false; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "showNotifications": { "alias": "showNotifications"; "required": false; }; "showDocuments": { "alias": "showDocuments"; "required": false; }; "showAvatar": { "alias": "showAvatar"; "required": false; }; "showLanguage": { "alias": "showLanguage"; "required": false; }; "showHelp": { "alias": "showHelp"; "required": false; }; "actionButtons": { "alias": "actionButtons"; "required": false; }; }, { "action": "action"; }, never, never, true, never>;
+}

package/lib/sidebar/sidebar.d.ts

@@ -0,0 +1,44 @@
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export interface SidebarItem {
+    id: string;
+    label: string;
+    /** Lucide icon name (kebab-case). */
+    icon: string;
+    /** Nested items — renders an expandable group with a chevron. */
+    children?: SidebarItem[];
+    /** Render a divider above this item. */
+    dividerBefore?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Sidebar — vertical app navigation from the ComPsych Design System.
+ *
+ * Figma: Core Components — base 260:4700, parts 213:1585.
+ *
+ * Icon + label items with default / hover / selected / focus / disabled states,
+ * section dividers, expandable groups (chevron), and a pinned footer
+ * (location & language, logout). Data-driven via `items` / `footerItems`,
+ * defaulting to the design's content. All values are sys tokens.
+ */
+export declare class SidebarComponent {
+    private readonly sanitizer;
+    readonly items: import("@angular/core").InputSignal<SidebarItem[]>;
+    readonly footerItems: import("@angular/core").InputSignal<SidebarItem[]>;
+    /** Currently selected item id — supports two-way binding via [(activeId)]. */
+    readonly activeId: import("@angular/core").ModelSignal<string>;
+    private readonly expanded;
+    constructor(sanitizer: DomSanitizer);
+    isExpanded(id: string): boolean;
+    isActive(id: string): boolean;
+    onItemClick(item: SidebarItem): void;
+    /**
+     * Looks up a Lucide icon by name and injects explicit width/height attributes
+     * so the SVG renders at the correct size when injected via [innerHTML].
+     * Angular's CSS encapsulation does not add _ngcontent attributes to dynamically
+     * injected content, so explicit SVG attributes are the reliable solution.
+     */
+    iconSvg(name: string, size?: number, strokeWidth?: number): SafeHtml;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarComponent, "compsych-sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "footerItems": { "alias": "footerItems"; "required": false; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; }, { "activeId": "activeIdChange"; }, never, never, true, never>;
+}

package/package.json

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

package/esm2022/lib/accordion/accordion-item.js

@@ -1,69 +0,0 @@
-import { Component, EventEmitter, Input, Output, } from '@angular/core';
-import { NgIf } from '@angular/common';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { LUCIDE_ICONS } from '@compsych-ui-components/shared/assets/lucide-icons.generated';
-import * as i0 from "@angular/core";
-import * as i1 from "@angular/platform-browser";
-export class AccordionItemComponent {
-    sanitizer;
-    title = '';
-    set icon(name) {
-        const svg = LUCIDE_ICONS[name];
-        this.iconSvg = svg ? this.sanitizer.bypassSecurityTrustHtml(svg) : null;
-    }
-    iconSvg = null;
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    get expanded() { return this._expanded; }
-    set expanded(value) { this._expanded = coerceBooleanProperty(value); }
-    _expanded = false;
-    expandedChange = new EventEmitter();
-    toggle() {
-        this._expanded = !this._expanded;
-        this.expandedChange.emit(this._expanded);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionItemComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: AccordionItemComponent, isStandalone: true, selector: "compsych-accordion-item", inputs: { title: "title", icon: "icon", expanded: "expanded" }, outputs: { expandedChange: "expandedChange" }, host: { classAttribute: "compsych-accordion-item" }, ngImport: i0, template: `
-    <button
-      class="trigger"
-      type="button"
-      [attr.aria-expanded]="expanded"
-      (click)="toggle()"
-    >
-      <span *ngIf="iconSvg" class="trigger-leading-icon" [innerHTML]="iconSvg" aria-hidden="true"></span>
-      <span class="trigger-label">{{ title }}</span>
-      <span class="trigger-toggle material-symbols-rounded" aria-hidden="true">{{ expanded ? 'remove' : 'add' }}</span>
-    </button>
-    <div *ngIf="expanded" class="content" role="region">
-      <ng-content />
-    </div>
-  `, isInline: true, styles: [":host{display:block;border-bottom:var(--sys-stroke-thin) solid var(--sys-outline-variant)}:host:first-child{border-top:var(--sys-stroke-thin) solid var(--sys-outline-variant)}.trigger{display:flex;align-items:center;gap:var(--sys-padding-8);width:100%;padding:var(--sys-padding-16) var(--sys-padding-24);background:none;border:none;cursor:pointer;text-align:left;color:var(--sys-on-surface);font-family:var(--sys-font-family);font-size:var(--sys-font-size);font-weight:var(--sys-font-weight);line-height:var(--sys-line-height);letter-spacing:var(--sys-tracking);position:relative;overflow:hidden;border-radius:0}.trigger:before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:0;transition:opacity .15s ease;pointer-events:none}.trigger:hover:before{opacity:.08}.trigger:active:before{opacity:.1}.trigger-label{flex:1;min-width:0}.trigger-leading-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;color:var(--sys-on-surface);flex-shrink:0}.trigger-leading-icon svg{width:100%;height:100%}.trigger-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;font-size:1rem;line-height:1;color:var(--sys-on-primary-fixed);background-color:var(--sys-primary-fixed-dim);border-radius:var(--sys-radius-full);box-sizing:border-box}.content{padding:0 var(--sys-padding-16) var(--sys-padding-16);color:var(--sys-on-surface-variant);font-family:var(--sys-font-family);font-size:var(--sys-font-size);font-weight:var(--sys-font-weight);line-height:var(--sys-line-height)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'compsych-accordion-item', standalone: true, imports: [NgIf], template: `
-    <button
-      class="trigger"
-      type="button"
-      [attr.aria-expanded]="expanded"
-      (click)="toggle()"
-    >
-      <span *ngIf="iconSvg" class="trigger-leading-icon" [innerHTML]="iconSvg" aria-hidden="true"></span>
-      <span class="trigger-label">{{ title }}</span>
-      <span class="trigger-toggle material-symbols-rounded" aria-hidden="true">{{ expanded ? 'remove' : 'add' }}</span>
-    </button>
-    <div *ngIf="expanded" class="content" role="region">
-      <ng-content />
-    </div>
-  `, host: { class: 'compsych-accordion-item' }, styles: [":host{display:block;border-bottom:var(--sys-stroke-thin) solid var(--sys-outline-variant)}:host:first-child{border-top:var(--sys-stroke-thin) solid var(--sys-outline-variant)}.trigger{display:flex;align-items:center;gap:var(--sys-padding-8);width:100%;padding:var(--sys-padding-16) var(--sys-padding-24);background:none;border:none;cursor:pointer;text-align:left;color:var(--sys-on-surface);font-family:var(--sys-font-family);font-size:var(--sys-font-size);font-weight:var(--sys-font-weight);line-height:var(--sys-line-height);letter-spacing:var(--sys-tracking);position:relative;overflow:hidden;border-radius:0}.trigger:before{content:\"\";position:absolute;inset:0;background-color:currentColor;opacity:0;transition:opacity .15s ease;pointer-events:none}.trigger:hover:before{opacity:.08}.trigger:active:before{opacity:.1}.trigger-label{flex:1;min-width:0}.trigger-leading-icon{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;color:var(--sys-on-surface);flex-shrink:0}.trigger-leading-icon svg{width:100%;height:100%}.trigger-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;font-size:1rem;line-height:1;color:var(--sys-on-primary-fixed);background-color:var(--sys-primary-fixed-dim);border-radius:var(--sys-radius-full);box-sizing:border-box}.content{padding:0 var(--sys-padding-16) var(--sys-padding-16);color:var(--sys-on-surface-variant);font-family:var(--sys-font-family);font-size:var(--sys-font-size);font-weight:var(--sys-font-weight);line-height:var(--sys-line-height)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { title: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], expanded: [{
-                type: Input
-            }], expandedChange: [{
-                type: Output
-            }] } });
-//# sourceMappingURL=accordion-item.js.map

package/esm2022/lib/accordion/accordion-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/accordion/accordion-item.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,YAAY,EACZ,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAgB,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAC;;;AAwB5F,MAAM,OAAO,sBAAsB;IAWJ;IAVpB,KAAK,GAAG,EAAE,CAAC;IAEpB,IACI,IAAI,CAAC,IAAY;QACnB,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QAC/B,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1E,CAAC;IAED,OAAO,GAAoB,IAAI,CAAC;IAEhC,YAA6B,SAAuB;QAAvB,cAAS,GAAT,SAAS,CAAc;IAAG,CAAC;IAExD,IACI,QAAQ,KAAc,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAClD,IAAI,QAAQ,CAAC,KAAmB,IAAI,IAAI,CAAC,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC5E,SAAS,GAAG,KAAK,CAAC;IAEhB,cAAc,GAAG,IAAI,YAAY,EAAW,CAAC;IAEvD,MAAM;QACJ,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC3C,CAAC;wGAvBU,sBAAsB;4FAAtB,sBAAsB,uPAlBvB;;;;;;;;;;;;;;GAcT,4mDAfS,IAAI;;4FAmBH,sBAAsB;kBAtBlC,SAAS;+BACE,yBAAyB,cACvB,IAAI,WACP,CAAC,IAAI,CAAC,YACL;;;;;;;;;;;;;;GAcT,QAEK,EAAE,KAAK,EAAE,yBAAyB,EAAE;;sBAGzC,KAAK;;sBAEL,KAAK;;sBAUL,KAAK;;sBAKL,MAAM","sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\nimport { NgIf } from '@angular/common';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { LUCIDE_ICONS } from '@compsych-ui-components/shared/assets/lucide-icons.generated';\n\n@Component({\n  selector: 'compsych-accordion-item',\n  standalone: true,\n  imports: [NgIf],\n  template: `\n    <button\n      class=\"trigger\"\n      type=\"button\"\n      [attr.aria-expanded]=\"expanded\"\n      (click)=\"toggle()\"\n    >\n      <span *ngIf=\"iconSvg\" class=\"trigger-leading-icon\" [innerHTML]=\"iconSvg\" aria-hidden=\"true\"></span>\n      <span class=\"trigger-label\">{{ title }}</span>\n      <span class=\"trigger-toggle material-symbols-rounded\" aria-hidden=\"true\">{{ expanded ? 'remove' : 'add' }}</span>\n    </button>\n    <div *ngIf=\"expanded\" class=\"content\" role=\"region\">\n      <ng-content />\n    </div>\n  `,\n  styleUrl: './accordion-item.css',\n  host: { class: 'compsych-accordion-item' },\n})\nexport class AccordionItemComponent {\n  @Input() title = '';\n\n  @Input()\n  set icon(name: string) {\n    const svg = LUCIDE_ICONS[name];\n    this.iconSvg = svg ? this.sanitizer.bypassSecurityTrustHtml(svg) : null;\n  }\n\n  iconSvg: SafeHtml | null = null;\n\n  constructor(private readonly sanitizer: DomSanitizer) {}\n\n  @Input()\n  get expanded(): boolean { return this._expanded; }\n  set expanded(value: BooleanInput) { this._expanded = coerceBooleanProperty(value); }\n  private _expanded = false;\n\n  @Output() expandedChange = new EventEmitter<boolean>();\n\n  toggle(): void {\n    this._expanded = !this._expanded;\n    this.expandedChange.emit(this._expanded);\n  }\n}\n"]}

package/lib/accordion/accordion-item.d.ts

@@ -1,18 +0,0 @@
-import { EventEmitter } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { BooleanInput } from '@angular/cdk/coercion';
-import * as i0 from "@angular/core";
-export declare class AccordionItemComponent {
-    private readonly sanitizer;
-    title: string;
-    set icon(name: string);
-    iconSvg: SafeHtml | null;
-    constructor(sanitizer: DomSanitizer);
-    get expanded(): boolean;
-    set expanded(value: BooleanInput);
-    private _expanded;
-    expandedChange: EventEmitter<boolean>;
-    toggle(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemComponent, "compsych-accordion-item", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
-}