@ng-primitives/mcp 0.111.1 → 0.112.0

package/package.json

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

package/src/generated/api-data.json

@@ -2004,6 +2004,102 @@
     ],
     "outputs": []
   },
+  "NgpNumberFieldIncrement": {
+    "name": "NgpNumberFieldIncrement",
+    "description": "Apply the `ngpNumberFieldIncrement` directive to a button element that increments the number field value.",
+    "selector": "[ngpNumberFieldIncrement]",
+    "exportAs": [
+      "ngpNumberFieldIncrement"
+    ],
+    "inputs": [],
+    "outputs": []
+  },
+  "NgpNumberFieldDecrement": {
+    "name": "NgpNumberFieldDecrement",
+    "description": "Apply the `ngpNumberFieldDecrement` directive to a button element that decrements the number field value.",
+    "selector": "[ngpNumberFieldDecrement]",
+    "exportAs": [
+      "ngpNumberFieldDecrement"
+    ],
+    "inputs": [],
+    "outputs": []
+  },
+  "NgpNumberFieldInput": {
+    "name": "NgpNumberFieldInput",
+    "description": "Apply the `ngpNumberFieldInput` directive to an input element within a number field.",
+    "selector": "[ngpNumberFieldInput]",
+    "exportAs": [
+      "ngpNumberFieldInput"
+    ],
+    "inputs": [
+      {
+        "name": "ngpNumberFieldInputAllowWheelScrub",
+        "type": "boolean",
+        "description": "Whether mouse wheel changes the value when the input is focused.",
+        "isRequired": false
+      }
+    ],
+    "outputs": []
+  },
+  "NgpNumberField": {
+    "name": "NgpNumberField",
+    "description": "Apply the `ngpNumberField` directive to an element that represents the number field\nand contains the input, increment, and decrement buttons.",
+    "selector": "[ngpNumberField]",
+    "exportAs": [
+      "ngpNumberField"
+    ],
+    "inputs": [
+      {
+        "name": "ngpNumberFieldValue",
+        "type": "number | null",
+        "description": "The value of the number field.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpNumberFieldMin",
+        "type": "number",
+        "description": "The minimum value.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpNumberFieldMax",
+        "type": "number",
+        "description": "The maximum value.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpNumberFieldStep",
+        "type": "number",
+        "description": "The step value.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpNumberFieldLargeStep",
+        "type": "number",
+        "description": "The large step value (used with Shift key).",
+        "isRequired": false
+      },
+      {
+        "name": "ngpNumberFieldDisabled",
+        "type": "boolean",
+        "description": "The disabled state of the number field.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpNumberFieldReadonly",
+        "type": "boolean",
+        "description": "The readonly state of the number field.",
+        "isRequired": false
+      }
+    ],
+    "outputs": [
+      {
+        "name": "ngpNumberFieldValueChange",
+        "type": "number | null",
+        "description": "Emits when the value changes."
+      }
+    ]
+  },
   "NgpPagination": {
     "name": "NgpPagination",
     "description": "The `NgpPagination` directive is used to create a pagination control.",

package/src/generated/primitives-data.json

@@ -945,6 +945,59 @@
       }
     ]
   },
+  {
+    "name": "number-field",
+    "entryPoint": "ng-primitives/number-field",
+    "exports": [
+      "NgpNumberField",
+      "injectNumberFieldState",
+      "ngpNumberField",
+      "NgpNumberFieldProps",
+      "NgpNumberFieldState",
+      "provideNumberFieldState",
+      "NgpNumberFieldInput",
+      "injectNumberFieldInputState",
+      "ngpNumberFieldInput",
+      "NgpNumberFieldInputProps",
+      "NgpNumberFieldInputState",
+      "provideNumberFieldInputState",
+      "NgpNumberFieldIncrement",
+      "injectNumberFieldIncrementState",
+      "ngpNumberFieldIncrement",
+      "NgpNumberFieldIncrementProps",
+      "NgpNumberFieldIncrementState",
+      "provideNumberFieldIncrementState",
+      "NgpNumberFieldDecrement",
+      "injectNumberFieldDecrementState",
+      "ngpNumberFieldDecrement",
+      "NgpNumberFieldDecrementProps",
+      "NgpNumberFieldDecrementState",
+      "provideNumberFieldDecrementState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "A numeric input with increment and decrement buttons.",
+    "accessibility": [
+      "ARIA design"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpNumberField,\n  NgpNumberFieldInput,\n  NgpNumberFieldIncrement,\n  NgpNumberFieldDecrement,\n} from 'ng-primitives/number-field';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<div ngpNumberField>\n  <button ngpNumberFieldDecrement>−</button>\n  <input ngpNumberFieldInput />\n  <button ngpNumberFieldIncrement>+</button>\n</div>",
+        "description": "Usage"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport {\n  NgpNumberField,\n  NgpNumberFieldDecrement,\n  NgpNumberFieldIncrement,\n  NgpNumberFieldInput,\n} from 'ng-primitives/number-field';\n\n@Component({\n  selector: 'app-number-field',\n  hostDirectives: [\n    {\n      directive: NgpNumberField,\n      inputs: [\n        'ngpNumberFieldValue:value',\n        'ngpNumberFieldMin:min',\n        'ngpNumberFieldMax:max',\n        'ngpNumberFieldStep:step',\n        'ngpNumberFieldLargeStep:largeStep',\n        'ngpNumberFieldDisabled:disabled',\n        'ngpNumberFieldReadonly:readonly',\n      ],\n      outputs: ['ngpNumberFieldValueChange:valueChange'],\n    },\n  ],\n  imports: [NgpNumberFieldInput, NgpNumberFieldIncrement, NgpNumberFieldDecrement],\n  template: `\n    <button ngpNumberFieldDecrement aria-label=\"Decrement\">−</button>\n    <input ngpNumberFieldInput />\n    <button ngpNumberFieldIncrement aria-label=\"Increment\">+</button>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      align-items: center;\n      border-radius: 8px;\n      box-shadow: var(--ngp-input-shadow);\n      background-color: var(--ngp-background);\n      overflow: hidden;\n    }\n\n    :host:focus-within {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpNumberFieldInput] {\n      width: 64px;\n      height: 36px;\n      border: none;\n      outline: none;\n      text-align: center;\n      font-size: 0.875rem;\n      color: var(--ngp-text-primary);\n      background: transparent;\n      box-sizing: border-box;\n      padding: 0;\n    }\n\n    [ngpNumberFieldInput]::placeholder {\n      color: var(--ngp-text-placeholder);\n    }\n\n    [ngpNumberFieldIncrement],\n    [ngpNumberFieldDecrement] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 36px;\n      height: 36px;\n      border: none;\n      background: transparent;\n      color: var(--ngp-text-secondary);\n      cursor: pointer;\n      font-size: 1rem;\n      user-select: none;\n      -webkit-touch-callout: none;\n      transition:\n        color 150ms ease,\n        background-color 150ms ease;\n    }\n\n    [ngpNumberFieldIncrement][data-hover],\n    [ngpNumberFieldDecrement][data-hover] {\n      background-color: var(--ngp-background-hover);\n      color: var(--ngp-text-primary);\n    }\n\n    [ngpNumberFieldIncrement][data-press],\n    [ngpNumberFieldDecrement][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpNumberFieldIncrement][data-disabled],\n    [ngpNumberFieldDecrement][data-disabled] {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n\n    [ngpNumberFieldIncrement][data-disabled][data-hover],\n    [ngpNumberFieldDecrement][data-disabled][data-hover] {\n      background: transparent;\n      color: var(--ngp-text-secondary);\n    }\n  `,\n})\nexport class NumberField {}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
   {
     "name": "pagination",
     "entryPoint": "ng-primitives/pagination",

package/src/generated/reusable-components.json

@@ -104,6 +104,13 @@
     "hasVariants": false,
     "hasSizes": true
   },
+  {
+    "name": "number-field",
+    "code": "import { Component } from '@angular/core';\nimport {\n  NgpNumberField,\n  NgpNumberFieldDecrement,\n  NgpNumberFieldIncrement,\n  NgpNumberFieldInput,\n} from 'ng-primitives/number-field';\n\n@Component({\n  selector: 'app-number-field',\n  hostDirectives: [\n    {\n      directive: NgpNumberField,\n      inputs: [\n        'ngpNumberFieldValue:value',\n        'ngpNumberFieldMin:min',\n        'ngpNumberFieldMax:max',\n        'ngpNumberFieldStep:step',\n        'ngpNumberFieldLargeStep:largeStep',\n        'ngpNumberFieldDisabled:disabled',\n        'ngpNumberFieldReadonly:readonly',\n      ],\n      outputs: ['ngpNumberFieldValueChange:valueChange'],\n    },\n  ],\n  imports: [NgpNumberFieldInput, NgpNumberFieldIncrement, NgpNumberFieldDecrement],\n  template: `\n    <button ngpNumberFieldDecrement aria-label=\"Decrement\">−</button>\n    <input ngpNumberFieldInput />\n    <button ngpNumberFieldIncrement aria-label=\"Increment\">+</button>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      align-items: center;\n      border-radius: 8px;\n      box-shadow: var(--ngp-input-shadow);\n      background-color: var(--ngp-background);\n      overflow: hidden;\n    }\n\n    :host:focus-within {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpNumberFieldInput] {\n      width: 64px;\n      height: 36px;\n      border: none;\n      outline: none;\n      text-align: center;\n      font-size: 0.875rem;\n      color: var(--ngp-text-primary);\n      background: transparent;\n      box-sizing: border-box;\n      padding: 0;\n    }\n\n    [ngpNumberFieldInput]::placeholder {\n      color: var(--ngp-text-placeholder);\n    }\n\n    [ngpNumberFieldIncrement],\n    [ngpNumberFieldDecrement] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 36px;\n      height: 36px;\n      border: none;\n      background: transparent;\n      color: var(--ngp-text-secondary);\n      cursor: pointer;\n      font-size: 1rem;\n      user-select: none;\n      -webkit-touch-callout: none;\n      transition:\n        color 150ms ease,\n        background-color 150ms ease;\n    }\n\n    [ngpNumberFieldIncrement][data-hover],\n    [ngpNumberFieldDecrement][data-hover] {\n      background-color: var(--ngp-background-hover);\n      color: var(--ngp-text-primary);\n    }\n\n    [ngpNumberFieldIncrement][data-press],\n    [ngpNumberFieldDecrement][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpNumberFieldIncrement][data-disabled],\n    [ngpNumberFieldDecrement][data-disabled] {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n\n    [ngpNumberFieldIncrement][data-disabled][data-hover],\n    [ngpNumberFieldDecrement][data-disabled][data-hover] {\n      background: transparent;\n      color: var(--ngp-text-secondary);\n    }\n  `,\n})\nexport class NumberField {}\n",
+    "primitive": "number-field",
+    "hasVariants": false,
+    "hasSizes": true
+  },
   {
     "name": "pagination",
     "code": "import { Component, computed } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n  heroChevronDoubleLeft,\n  heroChevronDoubleRight,\n  heroChevronLeft,\n  heroChevronRight,\n} from '@ng-icons/heroicons/outline';\nimport {\n  injectPaginationState,\n  NgpPagination,\n  NgpPaginationButton,\n  NgpPaginationFirst,\n  NgpPaginationLast,\n  NgpPaginationNext,\n  NgpPaginationPrevious,\n} from 'ng-primitives/pagination';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-pagination',\n  hostDirectives: [\n    {\n      directive: NgpPagination,\n      inputs: [\n        'ngpPaginationPage:page',\n        'ngpPaginationPageCount:pageCount',\n        'ngpPaginationDisabled:disabled',\n      ],\n      outputs: ['ngpPaginationPageChange:pageChange'],\n    },\n  ],\n  imports: [\n    NgpPaginationButton,\n    NgpPaginationFirst,\n    NgpPaginationLast,\n    NgpPaginationNext,\n    NgpPaginationPrevious,\n    NgIcon,\n  ],\n  providers: [\n    provideValueAccessor(NgpPagination),\n    provideIcons({\n      heroChevronDoubleLeft,\n      heroChevronDoubleRight,\n      heroChevronLeft,\n      heroChevronRight,\n    }),\n  ],\n  template: `\n    <ul>\n      <li>\n        <button ngpPaginationFirst aria-label=\"First Page\">\n          <ng-icon name=\"heroChevronDoubleLeft\" />\n        </button>\n      </li>\n\n      <li>\n        <button ngpPaginationPrevious aria-label=\"Previous Page\">\n          <ng-icon name=\"heroChevronLeft\" />\n        </button>\n      </li>\n\n      @for (page of pages(); track page) {\n        <li>\n          <button\n            [ngpPaginationButtonPage]=\"page\"\n            [attr.aria-label]=\"'Page ' + page\"\n            ngpPaginationButton\n          >\n            {{ page }}\n          </button>\n        </li>\n      }\n\n      <li>\n        <button ngpPaginationNext aria-label=\"Next Page\">\n          <ng-icon name=\"heroChevronRight\" />\n        </button>\n      </li>\n\n      <li>\n        <button ngpPaginationLast aria-label=\"Last Page\">\n          <ng-icon name=\"heroChevronDoubleRight\" />\n        </button>\n      </li>\n    </ul>\n  `,\n  styles: `\n    ul {\n      display: flex;\n      align-items: center;\n      column-gap: 0.5rem;\n      list-style: none;\n    }\n\n    [ngpPaginationFirst],\n    [ngpPaginationPrevious],\n    [ngpPaginationButton],\n    [ngpPaginationNext],\n    [ngpPaginationLast] {\n      all: unset;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 2rem;\n      height: 2rem;\n      border-radius: 0.5rem;\n      color: var(--ngp-text-primary);\n      outline: none;\n      font-size: 14px;\n      font-weight: 500;\n      background-color: var(--ngp-background);\n      box-shadow: var(--ngp-button-shadow);\n      cursor: pointer;\n      transition: background-color 0.2s;\n\n      &[data-hover]:not([data-disabled]):not([data-selected]) {\n        background-color: var(--ngp-background-hover);\n      }\n\n      &[data-focus-visible]:not([data-disabled]) {\n        outline: 2px solid var(--ngp-focus-ring);\n      }\n\n      &[data-press]:not([data-disabled]):not([data-selected]) {\n        background-color: var(--ngp-background-active);\n      }\n\n      &[data-disabled] {\n        color: rgb(210 210 210);\n        background-color: var(--ngp-background-disabled);\n        cursor: not-allowed;\n        box-shadow: none;\n      }\n\n      &[data-selected] {\n        background-color: var(--ngp-background-inverse);\n        color: var(--ngp-text-inverse);\n      }\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Pagination implements ControlValueAccessor {\n  /** Access the pagination state */\n  protected readonly state = injectPaginationState();\n\n  /** Get the pages as an array we can iterate over */\n  protected readonly pages = computed(() =>\n    Array.from({ length: this.state().pageCount() }).map((_, i) => i + 1),\n  );\n\n  /** The onChange callback */\n  private onChange?: ChangeFn<number>;\n\n  /** The onTouched callback */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    this.state().pageChange.subscribe(value => this.onChange?.(value));\n  }\n\n  /** Write a new value to the control */\n  writeValue(value: number): void {\n    this.state().page.set(value);\n  }\n\n  /** Register a callback to be called when the value changes */\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  /** Register a callback to be called when the control is touched */\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n}\n",