@ng-primitives/mcp 0.125.0 → 0.126.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-primitives/mcp",
-  "version": "0.125.0",
+  "version": "0.126.0",
   "description": "MCP server for Angular Primitives - headless UI library",
   "type": "commonjs",
   "main": "./src/index.js",

package/src/generated/api-data.json

@@ -2564,6 +2564,99 @@
       }
     ]
   },
+  "NgpPasswordToggle": {
+    "name": "NgpPasswordToggle",
+    "description": "Apply the `ngpPasswordToggle` directive to a `button` element to toggle the visibility of the\npassword within an `ngpPassword` container.",
+    "selector": "button[ngpPasswordToggle]",
+    "exportAs": [
+      "ngpPasswordToggle"
+    ],
+    "inputs": [
+      {
+        "name": "ngpPasswordToggleShowLabel",
+        "type": "string",
+        "description": "The accessible label shown when the password is hidden.",
+        "isRequired": false,
+        "defaultValue": "'Show password'"
+      },
+      {
+        "name": "ngpPasswordToggleHideLabel",
+        "type": "string",
+        "description": "The accessible label shown when the password is visible.",
+        "isRequired": false,
+        "defaultValue": "'Hide password'"
+      },
+      {
+        "name": "ngpPasswordToggleShownAnnouncement",
+        "type": "string",
+        "description": "The message announced when the password becomes visible.",
+        "isRequired": false,
+        "defaultValue": "'Your password is shown'"
+      },
+      {
+        "name": "ngpPasswordToggleHiddenAnnouncement",
+        "type": "string",
+        "description": "The message announced when the password becomes hidden.",
+        "isRequired": false,
+        "defaultValue": "'Your password is hidden'"
+      }
+    ],
+    "outputs": []
+  },
+  "NgpPassword": {
+    "name": "NgpPassword",
+    "description": "The `NgpPassword` directive is a container for a password field and its visibility toggle.",
+    "selector": "[ngpPassword]",
+    "exportAs": [
+      "ngpPassword"
+    ],
+    "inputs": [
+      {
+        "name": "ngpPasswordVisible",
+        "type": "boolean | undefined",
+        "description": "Whether the password is visible.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpPasswordDefaultVisible",
+        "type": "boolean",
+        "description": "The default visibility state for uncontrolled usage.\n@default false",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "ngpPasswordVisibleChange",
+        "type": "boolean",
+        "description": "Emits when the visibility state changes."
+      }
+    ]
+  },
+  "NgpPasswordInput": {
+    "name": "NgpPasswordInput",
+    "description": "Apply the `ngpPasswordInput` directive to an `input` element within an `ngpPassword` container.\nIt is a complete input (form control, interactions, autofill) with password visibility toggling\nlayered on top, so it does not need to be combined with `ngpInput`.",
+    "selector": "input[ngpPasswordInput]",
+    "exportAs": [
+      "ngpPasswordInput"
+    ],
+    "inputs": [
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "description": "Whether the input is disabled.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpPasswordInputIgnorePasswordManagers",
+        "type": "boolean",
+        "description": "Whether to opt the input out of password manager injection\n(1Password, LastPass, Bitwarden, etc.).",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": []
+  },
   "NgpPopoverArrow": {
     "name": "NgpPopoverArrow",
     "description": "",
@@ -4177,6 +4270,41 @@
       }
     ]
   },
+  "NgpPasswordConfig": {
+    "name": "NgpPasswordConfig",
+    "properties": [
+      {
+        "name": "showLabel",
+        "type": "string",
+        "description": "The accessible label for the toggle button when the password is hidden.",
+        "default": "'Show password'"
+      },
+      {
+        "name": "hideLabel",
+        "type": "string",
+        "description": "The accessible label for the toggle button when the password is visible.",
+        "default": "'Hide password'"
+      },
+      {
+        "name": "shownAnnouncement",
+        "type": "string",
+        "description": "The message announced to screen readers when the password becomes visible.",
+        "default": "'Your password is shown'"
+      },
+      {
+        "name": "hiddenAnnouncement",
+        "type": "string",
+        "description": "The message announced to screen readers when the password becomes hidden.",
+        "default": "'Your password is hidden'"
+      },
+      {
+        "name": "ignorePasswordManagers",
+        "type": "boolean",
+        "description": "Whether to opt the input out of password manager injection by default.",
+        "default": "false"
+      }
+    ]
+  },
   "NgpPopoverConfig": {
     "name": "NgpPopoverConfig",
     "properties": [

package/src/generated/primitives-data.json

@@ -1134,6 +1134,58 @@
       "hasSizes": true
     }
   },
+  {
+    "name": "password",
+    "entryPoint": "ng-primitives/password",
+    "exports": [
+      "defaultPasswordConfig",
+      "injectPasswordConfig",
+      "NgpPasswordConfig",
+      "NgpPasswordConfigToken",
+      "providePasswordConfig",
+      "NgpPasswordInput",
+      "injectPasswordInputState",
+      "ngpPasswordInput",
+      "NgpPasswordInputProps",
+      "NgpPasswordInputState",
+      "providePasswordInputState",
+      "NgpPasswordToggle",
+      "injectPasswordToggleState",
+      "ngpPasswordToggle",
+      "NgpPasswordToggleProps",
+      "NgpPasswordToggleState",
+      "providePasswordToggleState",
+      "NgpPassword",
+      "injectPasswordState",
+      "ngpPassword",
+      "NgpPasswordProps",
+      "NgpPasswordState",
+      "providePasswordState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "The password primitive is a form control that lets users reveal and hide the contents of a password field with an accessible toggle button.",
+    "accessibility": [
+      "screen reader"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpFormField>\n  <label ngpLabel>Password</label>\n  <div ngpPassword #password=\"ngpPassword\">\n    <input ngpPasswordInput type=\"password\" autocomplete=\"current-password\" />\n    <button ngpButton ngpPasswordToggle>\n      <ng-icon [name]=\"password.isVisible() ? 'lucideEyeOff' : 'lucideEye'\" />\n    </button>\n  </div>\n</div>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-1",
+        "code": "import { providePasswordConfig } from 'ng-primitives/password';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    providePasswordConfig({\n      showLabel: 'Show password',\n      hideLabel: 'Hide password',\n      shownAnnouncement: 'Your password is shown',\n      hiddenAnnouncement: 'Your password is hidden',\n      ignorePasswordManagers: false,\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, input, signal } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEye, lucideEyeOff } from '@ng-icons/lucide';\nimport { NgpButton } from 'ng-primitives/button';\nimport {\n  injectPasswordState,\n  NgpPassword,\n  NgpPasswordInput,\n  NgpPasswordToggle,\n} from 'ng-primitives/password';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-password',\n  hostDirectives: [NgpPassword],\n  imports: [NgIcon, NgpPasswordInput, NgpPasswordToggle, NgpButton],\n  providers: [provideValueAccessor(Password), provideIcons({ lucideEye, lucideEyeOff })],\n  template: `\n    <input\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      (input)=\"onValueChange($event)\"\n      ngpPasswordInput\n      type=\"password\"\n      autocomplete=\"current-password\"\n    />\n    <button ngpButton ngpPasswordToggle>\n      <ng-icon [name]=\"state().visible() ? 'lucideEyeOff' : 'lucideEye'\" />\n    </button>\n  `,\n  styles: `\n    :host {\n      display: block;\n      position: relative;\n    }\n\n    [ngpPasswordInput] {\n      height: 2.125rem;\n      width: 100%;\n      border-radius: 0.5rem;\n      padding: 0 40px 0 12px;\n      border: none;\n      background: var(--ngp-background);\n      color: var(--ngp-text-primary);\n      font-size: 0.875rem;\n      letter-spacing: -0.006em;\n      box-shadow: var(--ngp-input-shadow);\n      outline: none;\n    }\n\n    [ngpPasswordInput][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpPasswordInput]::placeholder {\n      color: var(--ngp-text-placeholder);\n    }\n\n    [ngpPasswordToggle] {\n      position: absolute;\n      top: 0;\n      right: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2.125rem;\n      width: 2.125rem;\n      border: none;\n      border-radius: 0.5rem;\n      background-color: transparent;\n      color: var(--ngp-text-tertiary);\n      font-size: 1.125rem;\n      cursor: pointer;\n      outline: none;\n      transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    [ngpPasswordToggle][data-hover] {\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpPasswordToggle][data-visible] {\n      color: var(--ngp-primary);\n    }\n\n    [ngpPasswordToggle][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: -2px;\n    }\n  `,\n  host: {\n    '(focusout)': 'onFocusOut($event)',\n  },\n})\nexport class Password implements ControlValueAccessor {\n  /** Access the password state to read the visibility. */\n  protected readonly state = injectPasswordState();\n\n  /** The placeholder text */\n  readonly placeholder = input<string>('');\n\n  /** The current value */\n  protected value = signal<string>('');\n\n  /** The function to call when the value changes */\n  private onChange?: ChangeFn<string>;\n\n  /** The function to call when the control is touched */\n  protected onTouched?: TouchedFn;\n\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  protected onValueChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.value.set(input.value);\n    this.onChange?.(input.value);\n  }\n\n  protected onFocusOut(event: FocusEvent): void {\n    // only mark as touched when focus leaves the component, not when moving\n    // between the input and the toggle button\n    const host = event.currentTarget as HTMLElement;\n    if (!host.contains(event.relatedTarget as Node | null)) {\n      this.onTouched?.();\n    }\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
   {
     "name": "popover",
     "entryPoint": "ng-primitives/popover",

package/src/generated/reusable-components.json

@@ -125,6 +125,13 @@
     "hasVariants": false,
     "hasSizes": true
   },
+  {
+    "name": "password",
+    "code": "import { Component, input, signal } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEye, lucideEyeOff } from '@ng-icons/lucide';\nimport { NgpButton } from 'ng-primitives/button';\nimport {\n  injectPasswordState,\n  NgpPassword,\n  NgpPasswordInput,\n  NgpPasswordToggle,\n} from 'ng-primitives/password';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-password',\n  hostDirectives: [NgpPassword],\n  imports: [NgIcon, NgpPasswordInput, NgpPasswordToggle, NgpButton],\n  providers: [provideValueAccessor(Password), provideIcons({ lucideEye, lucideEyeOff })],\n  template: `\n    <input\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      (input)=\"onValueChange($event)\"\n      ngpPasswordInput\n      type=\"password\"\n      autocomplete=\"current-password\"\n    />\n    <button ngpButton ngpPasswordToggle>\n      <ng-icon [name]=\"state().visible() ? 'lucideEyeOff' : 'lucideEye'\" />\n    </button>\n  `,\n  styles: `\n    :host {\n      display: block;\n      position: relative;\n    }\n\n    [ngpPasswordInput] {\n      height: 2.125rem;\n      width: 100%;\n      border-radius: 0.5rem;\n      padding: 0 40px 0 12px;\n      border: none;\n      background: var(--ngp-background);\n      color: var(--ngp-text-primary);\n      font-size: 0.875rem;\n      letter-spacing: -0.006em;\n      box-shadow: var(--ngp-input-shadow);\n      outline: none;\n    }\n\n    [ngpPasswordInput][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpPasswordInput]::placeholder {\n      color: var(--ngp-text-placeholder);\n    }\n\n    [ngpPasswordToggle] {\n      position: absolute;\n      top: 0;\n      right: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2.125rem;\n      width: 2.125rem;\n      border: none;\n      border-radius: 0.5rem;\n      background-color: transparent;\n      color: var(--ngp-text-tertiary);\n      font-size: 1.125rem;\n      cursor: pointer;\n      outline: none;\n      transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    [ngpPasswordToggle][data-hover] {\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpPasswordToggle][data-visible] {\n      color: var(--ngp-primary);\n    }\n\n    [ngpPasswordToggle][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: -2px;\n    }\n  `,\n  host: {\n    '(focusout)': 'onFocusOut($event)',\n  },\n})\nexport class Password implements ControlValueAccessor {\n  /** Access the password state to read the visibility. */\n  protected readonly state = injectPasswordState();\n\n  /** The placeholder text */\n  readonly placeholder = input<string>('');\n\n  /** The current value */\n  protected value = signal<string>('');\n\n  /** The function to call when the value changes */\n  private onChange?: ChangeFn<string>;\n\n  /** The function to call when the control is touched */\n  protected onTouched?: TouchedFn;\n\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  protected onValueChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.value.set(input.value);\n    this.onChange?.(input.value);\n  }\n\n  protected onFocusOut(event: FocusEvent): void {\n    // only mark as touched when focus leaves the component, not when moving\n    // between the input and the toggle button\n    const host = event.currentTarget as HTMLElement;\n    if (!host.contains(event.relatedTarget as Node | null)) {\n      this.onTouched?.();\n    }\n  }\n}\n",
+    "primitive": "password",
+    "hasVariants": false,
+    "hasSizes": true
+  },
   {
     "name": "popover",
     "code": "import { Directive, input } from '@angular/core';\nimport { injectPopoverTriggerState } from 'ng-primitives/popover';\nimport { NgpPopoverTrigger } from 'ng-primitives/popover';\nimport { Popover } from './popover';\n\n@Directive({\n  selector: '[appPopoverTrigger]',\n  hostDirectives: [\n    {\n      directive: NgpPopoverTrigger,\n      inputs: [\n        'ngpPopoverTriggerDisabled:appPopoverTriggerDisabled',\n        'ngpPopoverTriggerPlacement:appPopoverTriggerPlacement',\n        'ngpPopoverTriggerOffset:appPopoverTriggerOffset',\n        'ngpPopoverTriggerShowDelay:appPopoverTriggerShowDelay',\n        'ngpPopoverTriggerHideDelay:appPopoverTriggerHideDelay',\n        'ngpPopoverTriggerFlip:appPopoverTriggerFlip',\n        'ngpPopoverTriggerContainer:appPopoverTriggerContainer',\n        'ngpPopoverTriggerCloseOnOutsideClick:appPopoverTriggerCloseOnOutsideClick',\n        'ngpPopoverTriggerCloseOnEscape:appPopoverTriggerCloseOnEscape',\n        'ngpPopoverTriggerScrollBehavior:appPopoverTriggerScrollBehavior',\n        'ngpPopoverTriggerContext:appPopoverTrigger',\n      ],\n    },\n  ],\n})\nexport class PopoverTrigger {\n  /** Access the popover trigger */\n  private readonly popoverTrigger = injectPopoverTriggerState();\n\n  /** Define the content of the popover */\n  readonly content = input.required<string>({\n    alias: 'appPopoverTrigger',\n  });\n\n  constructor() {\n    this.popoverTrigger().popover.set(Popover);\n  }\n}\n",