@ng-primitives/mcp 0.130.0 → 0.130.1

package/package.json

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

package/src/generated/api-data.json

@@ -2517,6 +2517,13 @@
         "description": "Provide context to the menu. This can be used to pass data to the menu content.",
         "isRequired": false
       },
+      {
+        "name": "ngpMenuTriggerAnchor",
+        "type": "HTMLElement | null",
+        "description": "Define an anchor element for positioning the menu.\nIf provided, the menu will be positioned relative to this element instead of the trigger.\n\nThe anchor is live, so rebinding it moves an open menu.\n\nAn input only reaches this directive on the next change detection pass, which a press\ncan outrun - use `setAnchor()` instead when the anchor is claimed during one.",
+        "isRequired": false,
+        "defaultValue": "null"
+      },
       {
         "name": "ngpMenuTriggerOpenTriggers",
         "type": "('click' | 'hover' | 'focus' | 'enter' | 'arrowkey')[]",
@@ -2880,39 +2887,39 @@
       {
         "name": "ngpNumberFieldValue",
         "type": "number | null | undefined",
-        "description": "The value of the number field. When defined the number field is controlled.",
+        "description": "The value of the number field. When defined the number field is controlled.\nA non-finite value (`NaN`, `±Infinity`) is treated as empty.",
         "isRequired": false
       },
       {
         "name": "ngpNumberFieldDefaultValue",
         "type": "number | null",
-        "description": "The default value of the number field for uncontrolled usage.\n@default null",
+        "description": "The default value of the number field for uncontrolled usage.\nA non-finite value (`NaN`, `±Infinity`) is treated as empty.\n@default null",
         "isRequired": false,
         "defaultValue": "null"
       },
       {
         "name": "ngpNumberFieldMin",
         "type": "number",
-        "description": "The minimum value.",
+        "description": "The minimum value. A non-finite value (`NaN`, `±Infinity`) is treated as unset,\nleaving the field unbounded below.",
         "isRequired": false
       },
       {
         "name": "ngpNumberFieldMax",
         "type": "number",
-        "description": "The maximum value.",
+        "description": "The maximum value. A non-finite value (`NaN`, `±Infinity`) is treated as unset,\nleaving the field unbounded above.",
         "isRequired": false
       },
       {
         "name": "ngpNumberFieldStep",
         "type": "number",
-        "description": "The step value.",
+        "description": "The step value. A non-finite value (`NaN`, `±Infinity`) falls back to `1`.",
         "isRequired": false,
         "defaultValue": "1"
       },
       {
         "name": "ngpNumberFieldLargeStep",
         "type": "number",
-        "description": "The large step value (used with Shift key).",
+        "description": "The large step value (used with Shift key). A non-finite value (`NaN`, `±Infinity`) falls back to `10`.",
         "isRequired": false,
         "defaultValue": "10"
       },
@@ -3298,7 +3305,7 @@
       {
         "name": "ngpPopoverTriggerAnchor",
         "type": "HTMLElement | null",
-        "description": "Define an anchor element for positioning the popover.\nIf provided, the popover will be positioned relative to this element instead of the trigger.",
+        "description": "Define an anchor element for positioning the popover.\nIf provided, the popover will be positioned relative to this element instead of the trigger.\n\nThe anchor is live, so rebinding it moves an open popover.\n\nAn input only reaches this directive on the next change detection pass, which a press\ncan outrun - use `setAnchor()` instead when the anchor is claimed during one.",
         "isRequired": false,
         "defaultValue": "null"
       },
@@ -4497,7 +4504,7 @@
       {
         "name": "ngpTooltipTriggerAnchor",
         "type": "HTMLElement | null",
-        "description": "Define an anchor element for positioning the tooltip.\nIf provided, the tooltip will be positioned relative to this element instead of the trigger.",
+        "description": "Define an anchor element for positioning the tooltip.\nIf provided, the tooltip will be positioned relative to this element instead of the trigger.\n\nThe anchor is live, so rebinding it moves an open tooltip.\n\nAn input only reaches this directive on the next change detection pass, which a press\ncan outrun - use `setAnchor()` instead when the anchor is claimed during one.",
         "isRequired": false,
         "defaultValue": "null"
       },
@@ -5105,8 +5112,8 @@
       },
       {
         "name": "anchorElement",
-        "type": "HTMLElement | null",
-        "description": "The element to use for positioning the overlay (if different from trigger)"
+        "type": "HTMLElement | null | Signal<HTMLElement | null | undefined>",
+        "description": "The element to use for positioning the overlay (if different from trigger).  Pass a signal to re-anchor an overlay that is already open - a plain element is read once, when the overlay is created, and never revisited."
       },
       {
         "name": "injector",

package/src/generated/primitives-data.json

@@ -1191,16 +1191,21 @@
       },
       {
         "name": "example-6",
+        "code": "<button #trigger=\"ngpMenuTrigger\" [ngpMenuTrigger]=\"menu\">Actions</button>\n\n<button\n  #token\n  type=\"button\"\n  (pointerdown)=\"trigger.setAnchor(token)\"\n  (click)=\"trigger.setAnchor(token)\"\n>\n  {{ label }}\n</button>",
+        "description": "Custom Anchor"
+      },
+      {
+        "name": "example-7",
         "code": "<!-- Enable Enter key to toggle menu -->\n<button [ngpMenuTrigger]=\"menu\" [ngpMenuTriggerOpenTriggers]=\"['click', 'enter']\">Menu</button>\n\n<!-- Enable arrow keys (placement-aware) -->\n<button\n  [ngpMenuTrigger]=\"menu\"\n  [ngpMenuTriggerOpenTriggers]=\"['arrowkey']\"\n  ngpMenuTriggerPlacement=\"right-start\"\n>\n  Sidebar Menu\n</button>\n\n<!-- Combine triggers for best UX -->\n<button\n  [ngpMenuTrigger]=\"menu\"\n  [ngpMenuTriggerOpenTriggers]=\"['hover', 'arrowkey', 'enter']\"\n  ngpMenuTriggerPlacement=\"right-start\"\n>\n  Navigation Item\n</button>",
         "description": "Keyboard Triggers"
       },
       {
-        "name": "example-7",
+        "name": "example-8",
         "code": "<nav ngpMenuTriggerGroup [ngpMenuTriggerGroupSiblingTracking]=\"!collapsed()\">\n  <!-- triggers -->\n</nav>",
         "description": "Grouping Root Triggers"
       },
       {
-        "name": "example-8",
+        "name": "example-9",
         "code": "import { provideMenuConfig } from 'ng-primitives/menu';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideMenuConfig({\n      offset: 4,\n      placement: 'top',\n      flip: true,\n      container: document.body,\n      scrollBehavior: 'reposition',\n      cooldown: 0,\n    }),\n  ],\n});",
         "description": "Global Configuration"
       }
@@ -1462,7 +1467,7 @@
       }
     ],
     "reusableComponent": {
-      "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(Pagination),\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    /* Reduce motion for users who prefer reduced motion. */\n    @media (prefers-reduced-motion: reduce) {\n      [ngpPaginationFirst],\n      [ngpPaginationPrevious],\n      [ngpPaginationButton],\n      [ngpPaginationNext],\n      [ngpPaginationLast] {\n        transition-duration: 0s;\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    // writing a value from the model must not re-emit through onChange\n    this.state().setPage(value, { emit: false });\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  /** Reflect the form control's disabled state onto the pagination. */\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
+      "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(Pagination),\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    /* Reduce motion for users who prefer reduced motion. */\n    @media (prefers-reduced-motion: reduce) {\n      [ngpPaginationFirst],\n      [ngpPaginationPrevious],\n      [ngpPaginationButton],\n      [ngpPaginationNext],\n      [ngpPaginationLast] {\n        transition-duration: 0s;\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 | null): void {\n    // Angular writes null on reset and before the initial value lands; page is always\n    // a number, so fall back to the first page rather than passing null through.\n    // writing a value from the model must not re-emit through onChange\n    this.state().setPage(value ?? 1, { emit: false });\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  /** Reflect the form control's disabled state onto the pagination. */\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
       "hasVariants": false,
       "hasSizes": true
     }

package/src/generated/reusable-components.json

@@ -120,7 +120,7 @@
   },
   {
     "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(Pagination),\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    /* Reduce motion for users who prefer reduced motion. */\n    @media (prefers-reduced-motion: reduce) {\n      [ngpPaginationFirst],\n      [ngpPaginationPrevious],\n      [ngpPaginationButton],\n      [ngpPaginationNext],\n      [ngpPaginationLast] {\n        transition-duration: 0s;\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    // writing a value from the model must not re-emit through onChange\n    this.state().setPage(value, { emit: false });\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  /** Reflect the form control's disabled state onto the pagination. */\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
+    "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(Pagination),\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    /* Reduce motion for users who prefer reduced motion. */\n    @media (prefers-reduced-motion: reduce) {\n      [ngpPaginationFirst],\n      [ngpPaginationPrevious],\n      [ngpPaginationButton],\n      [ngpPaginationNext],\n      [ngpPaginationLast] {\n        transition-duration: 0s;\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 | null): void {\n    // Angular writes null on reset and before the initial value lands; page is always\n    // a number, so fall back to the first page rather than passing null through.\n    // writing a value from the model must not re-emit through onChange\n    this.state().setPage(value ?? 1, { emit: false });\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  /** Reflect the form control's disabled state onto the pagination. */\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
     "primitive": "pagination",
     "hasVariants": false,
     "hasSizes": true