@compsych-ui-components/angular 6.1.1 → 7.0.0

package/lib/button/button.d.ts

@@ -1,52 +1,81 @@
+import { OnChanges } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
 import * as i0 from "@angular/core";
 /** Visual style of a `compsych-button`. Controls color, border, and elevation. */
 export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'elevated' | 'text' | 'danger' | 'danger-outlined';
-/** Button dimensions — controls height, padding, and font size. */
+/** Button dimensions — controls height, padding, font size, and icon size. */
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
-/** Placement of `icon` relative to the label. */
-export type ButtonIconPosition = 'leading' | 'trailing';
 /** Native button behaviour. `'submit'`/`'reset'` make the component a real form control. */
 export type ButtonType = 'button' | 'submit' | 'reset';
 /**
  * A themeable button that renders a native `<button>` element, so it is fully
- * form-submittable and keyboard/screen-reader accessible out of the box.
+ * form-submittable and keyboard/screen-reader accessible out of the box. Icons
+ * are Lucide glyphs (matching the rest of the library); a button may carry a
+ * leading icon, a trailing icon, or both.
  */
-export declare class ButtonComponent {
+export declare class ButtonComponent implements OnChanges {
+    private readonly sanitizer;
     /** Text label rendered on the button. */
     label: string;
     /** Visual style of the button. Defaults to `'filled'`. */
     variant: ButtonVariant;
-    /** Button dimensions — controls height, padding, and font size. Defaults to `'small'`. */
+    /** Button dimensions — controls height, padding, font size, and icon size. Defaults to `'small'`. */
     size: ButtonSize;
-    /** Material Symbols icon name (e.g. `'search'`, `'arrow_forward'`). Omit to show label only. */
-    icon?: string;
-    /** Placement of `icon` relative to the label. Defaults to `'leading'`. */
-    iconPosition: ButtonIconPosition;
+    /** Lucide icon name shown before the label (e.g. `'house'`). Swapped for a spinner when loading. */
+    leadingIcon?: string;
+    /** Lucide icon name shown after the label (e.g. `'chevron-right'`). Can be combined with `leadingIcon`. */
+    trailingIcon?: string;
     /** Native button type. Use `'submit'` inside a `<form>` to submit it. Defaults to `'button'`. */
     type: ButtonType;
     /**
-     * Accessible name. Required for icon-only buttons since the icon is decorative
-     * (`aria-hidden`). When `iconOnly` is set and this is omitted, `label` is used.
+     * Accessible name. Required for icon-only buttons since the icon is decorative.
+     * When `iconOnly` or `loading` is set and this is omitted, `label` is used.
      */
     ariaLabel?: string;
-    /** Hides the label and renders a square icon-only button. Requires `icon`. Supports boolean coercion. */
+    /** Hides the label and renders a square icon-only button. Uses `leadingIcon`. Supports boolean coercion. */
     iconOnly: boolean;
-    /** Disables the button — non-interactive and dimmed. Supports boolean coercion. */
+    /** Disables the button — non-interactive and rendered in a neutral grey. Supports boolean coercion. */
     disabled: boolean;
     /**
-     * Loading state. Replaces the content with a centered spinner while preserving
-     * the button's width, blocks re-clicks, and exposes `aria-busy="true"`. The
-     * variant's colours are retained (unlike `disabled`, which dims the button).
-     * Supports boolean coercion.
+     * Loading state. Swaps the leading icon for a spinner and suppresses activation
+     * (native `disabled` blocks click/keyboard), while keeping the label and exposing
+     * `aria-busy="true"`. Retains the variant's colours. Supports boolean coercion.
      */
     loading: boolean;
+    /** Stretches the button to the full width of its container. Supports boolean coercion. */
+    fullWidth: boolean;
+    /** Mirrors `fullWidth` onto the host so it can stretch. */
+    get hostFullWidth(): boolean;
+    /** Pre-sanitized icon markup, recomputed on input change (avoids re-sanitizing every CD cycle). */
+    protected leadingIconSvg: SafeHtml | null;
+    protected trailingIconSvg: SafeHtml | null;
+    ngOnChanges(): void;
     /** Space-separated class list applied to the inner native button. */
     get buttonClasses(): string;
-    /** Resolves the accessible name, guaranteeing icon-only and loading buttons are labelled. */
+    /** Resolves the accessible name. Icon-only buttons have no visible text, so they fall back to `label`. */
     get computedAriaLabel(): string | null;
+    /**
+     * Looks up a Lucide icon by name and injects an explicit width/height so the SVG
+     * renders at the correct size when injected via `[innerHTML]` (Angular's CSS
+     * encapsulation does not reach dynamically injected content).
+     */
+    private buildIconSvg;
+    /** M3 pressed ripple: pointer-down spawns a ripple at the pointer position. */
+    onPointerDown(event: PointerEvent): void;
+    /** M3 pressed ripple: keyboard activation (Enter/Space) spawns a centered ripple. */
+    onKeyDown(event: KeyboardEvent): void;
+    /** Diameter that reaches the farthest corner from (x, y), so the ripple always covers the button. */
+    private farthestCornerDiameter;
+    /**
+     * Spawns an expanding ripple circle. Created imperatively with inline styles and
+     * animated via the Web Animations API — Angular's emulated encapsulation does not
+     * reach dynamically created nodes, so it cannot rely on the component stylesheet.
+     */
+    private spawnRipple;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "compsych-button", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "type": { "alias": "type"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "compsych-button", never, { "label": { "alias": "label"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "type": { "alias": "type"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; }, {}, never, ["*"], true, never>;
     static ngAcceptInputType_iconOnly: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_loading: unknown;
+    static ngAcceptInputType_fullWidth: unknown;
 }

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { ButtonVariant, ButtonIconPosition } from '../button/button';
+import { ButtonVariant } from '../button/button';
 import * as i0 from "@angular/core";
 export type HeaderNavLevel = 'main' | 'sub-page' | 'not-logged';
 /**
@@ -15,10 +15,10 @@ export interface NavAction {
     label: string;
     /** Button style for action buttons. Defaults to `'filled'` when omitted. Not used for breadcrumbs. */
     variant?: ButtonVariant;
-    /** Material Symbols icon shown on the action button (e.g. `'chevron_right'`). Not used for breadcrumbs. */
-    icon?: string;
-    /** Placement of `icon` relative to the label. Defaults to `'leading'`. */
-    iconPosition?: ButtonIconPosition;
+    /** Lucide icon shown before the label (e.g. `'house'`). Not used for breadcrumbs. */
+    leadingIcon?: string;
+    /** Lucide icon shown after the label (e.g. `'chevron-right'`). Not used for breadcrumbs. */
+    trailingIcon?: string;
     /** Renders the action button disabled. */
     disabled?: boolean;
     /** Renders the action button in a loading state (spinner, interaction blocked). */
@@ -127,10 +127,10 @@ export declare class HeaderNavComponent {
     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.
+     * (default 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>;

package/lib/sidebar/sidebar.d.ts

@@ -39,8 +39,8 @@ export declare class SidebarComponent {
     /** Currently active item id — supports two-way binding via `[(activeId)]`. Updated on click for route items; unchanged for `nonRoute` items. */
     readonly activeId: import("@angular/core").ModelSignal<string>;
     /**
-     * Emitted with the item's `id` whenever a non-disabled, non-group item is clicked.
-     * Fires for both route items and `nonRoute` items.
+     * Emitted with the item's `id` when a non-disabled action (`nonRoute`) item is clicked.
+     * Navigation (route) items do not emit — they update `activeId` instead (bind via `[(activeId)]`).
      * Group items (those with `children`) do not emit — they only toggle their expanded state.
      */
     readonly itemClick: import("@angular/core").OutputEmitterRef<string>;

package/package.json

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