@ng-primitives/mcp 0.116.0 → 0.117.1

package/src/generated/primitives-data.json

@@ -373,6 +373,55 @@
       "hasSizes": true
     }
   },
+  {
+    "name": "context-menu",
+    "entryPoint": "ng-primitives/context-menu",
+    "exports": [
+      "NgpContextMenuConfig",
+      "provideContextMenuConfig",
+      "NgpContextMenu",
+      "NgpContextMenuItem",
+      "NgpContextMenuItemCheckbox",
+      "NgpContextMenuItemIndicator",
+      "NgpContextMenuItemRadio",
+      "NgpContextMenuItemRadioGroup",
+      "NgpContextMenuSubmenuTrigger",
+      "NgpContextMenuTrigger",
+      "ngpContextMenuTrigger",
+      "injectContextMenuTriggerState",
+      "NgpContextMenuTriggerProps",
+      "NgpContextMenuTriggerState",
+      "provideContextMenuTriggerState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "A context menu displays a list of actions or options triggered by a right-click or long-press on an element.",
+    "accessibility": [
+      "ARIA Menu"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpContextMenu,\n  NgpContextMenuItem,\n  NgpContextMenuTrigger,\n  NgpContextMenuSubmenuTrigger,\n  NgpContextMenuItemCheckbox,\n  NgpContextMenuItemRadioGroup,\n  NgpContextMenuItemRadio,\n  NgpContextMenuItemIndicator,\n} from 'ng-primitives/context-menu';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<div [ngpContextMenuTrigger]=\"menu\">Right-click me</div>\n\n<ng-template #menu>\n  <div ngpContextMenu>\n    <button ngpContextMenuItem>Cut</button>\n    <button ngpContextMenuItem>Copy</button>\n    <button ngpContextMenuItem>Paste</button>\n  </div>\n</ng-template>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-2",
+        "code": "import { provideContextMenuConfig } from 'ng-primitives/context-menu';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideContextMenuConfig({\n      offset: 2,\n      flip: true,\n      container: document.body,\n      scrollBehavior: 'close',\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { NgpContextMenuItem } from 'ng-primitives/context-menu';\n\n@Component({\n  selector: 'button[app-context-menu-item]',\n  hostDirectives: [NgpContextMenuItem],\n  host: { type: 'button' },\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 6px 8px 6px 14px;\n      border: none;\n      background: none;\n      cursor: pointer;\n      transition: background-color 0.2s;\n      border-radius: 4px;\n      min-width: 120px;\n      text-align: start;\n      outline: none;\n      font-size: 14px;\n      font-weight: 400;\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      z-index: 1;\n    }\n  `,\n})\nexport class ContextMenuItem {}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
   {
     "name": "date-picker",
     "entryPoint": "ng-primitives/date-picker",
@@ -757,6 +806,7 @@
       "provideMenuItemRadioState",
       "NgpMenuTrigger",
       "type NgpMenuPlacement",
+      "NgpMenuTriggerStateToken",
       "ngpMenuTrigger",
       "injectMenuTriggerState",
       "NgpMenuTriggerProps",
@@ -769,6 +819,7 @@
       "NgpMenuState",
       "provideMenuState",
       "NgpSubmenuTrigger",
+      "NgpSubmenuTriggerStateToken",
       "ngpSubmenuTrigger",
       "injectSubmenuTriggerState",
       "NgpSubmenuTriggerProps",
@@ -812,16 +863,6 @@
         "name": "example-5",
         "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"
-      },
-      {
-        "name": "example-6",
-        "code": "offset: {\n    mainAxis: 8,     // Distance between menu and trigger element\n    crossAxis: 4,    // Skidding along the alignment axis  \n    alignmentAxis: 2 // Same as crossAxis but for aligned placements\n  }",
-        "description": "NgpMenuConfig"
-      },
-      {
-        "name": "example-7",
-        "code": "shift: {\n    padding: 8,     // Minimum padding between menu and viewport edges\n    limiter: {      // Optional limiter to control shifting behavior\n      fn: limitShift,\n      options: { /* limiter options */ }\n    }\n  }",
-        "description": "NgpMenuConfig"
       }
     ],
     "reusableComponent": {
@@ -1086,16 +1127,6 @@
         "name": "example-3",
         "code": "import { providePopoverConfig } from 'ng-primitives/popover';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    providePopoverConfig({\n      offset: 4,\n      placement: 'top',\n      showDelay: 0,\n      hideDelay: 0,\n      flip: true,\n      container: document.body,\n      closeOnOutsideClick: true,\n      scrollBehavior: 'reposition',\n      cooldown: 0,\n    }),\n  ],\n});",
         "description": "Global Configuration"
-      },
-      {
-        "name": "example-4",
-        "code": "offset: {\n    mainAxis: 8,     // Distance between popover and trigger element\n    crossAxis: 4,    // Skidding along the alignment axis  \n    alignmentAxis: 2 // Same as crossAxis but for aligned placements\n  }",
-        "description": "NgpPopoverConfig"
-      },
-      {
-        "name": "example-5",
-        "code": "shift: {\n    padding: 8,     // Minimum padding between popover and viewport edges\n    limiter: {      // Optional limiter to control shifting behavior\n      fn: limitShift,\n      options: { /* limiter options */ }\n    }\n  }",
-        "description": "NgpPopoverConfig"
       }
     ],
     "reusableComponent": {
@@ -1123,7 +1154,9 @@
       "NgpOverlayContent",
       "NgpOverlayTemplateContext",
       "NgpOverlayCooldownManager",
+      "dismissGuardAttribute",
       "NgpDismissGuard",
+      "NgpDismissGuardInput",
       "NgpDismissPolicy",
       "NgpOverlayEntry",
       "NgpOverlayRef",
@@ -1624,7 +1657,6 @@
     "category": "feedback",
     "description": "A toast is a non-modal, unobtrusive window element used to display brief, auto-expiring messages to the user.",
     "accessibility": [
-      "aria live",
       "screen reader"
     ],
     "examples": [
@@ -1822,16 +1854,6 @@
         "name": "example-6",
         "code": "import { provideTooltipConfig } from 'ng-primitives/tooltip';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideTooltipConfig({\n      offset: 4,\n      placement: 'top',\n      showDelay: 0,\n      hideDelay: 500,\n      flip: true,\n      container: document.body,\n      showOnOverflow: false,\n      useTextContent: true,\n      scrollBehavior: 'reposition',\n      cooldown: 300,\n      hoverableContent: false,\n    }),\n  ],\n});",
         "description": "Global Configuration"
-      },
-      {
-        "name": "example-7",
-        "code": "offset: {\n  mainAxis: 8,     // Distance between tooltip and trigger element\n  crossAxis: 4,    // Skidding along the alignment axis\n  alignmentAxis: 2 // Same as crossAxis but for aligned placements\n}",
-        "description": "NgpTooltipConfig"
-      },
-      {
-        "name": "example-8",
-        "code": "shift: {\n  padding: 8,     // Minimum padding between tooltip and viewport edges\n  limiter: {      // Optional limiter to control shifting behavior\n    fn: limitShift,\n    options: { /* limiter options */ }\n  }\n}",
-        "description": "NgpTooltipConfig"
       }
     ],
     "reusableComponent": {

package/src/generated/reusable-components.json

@@ -34,6 +34,13 @@
     "hasVariants": false,
     "hasSizes": true
   },
+  {
+    "name": "context-menu",
+    "code": "import { Component } from '@angular/core';\nimport { NgpContextMenuItem } from 'ng-primitives/context-menu';\n\n@Component({\n  selector: 'button[app-context-menu-item]',\n  hostDirectives: [NgpContextMenuItem],\n  host: { type: 'button' },\n  template: `\n    <ng-content />\n  `,\n  styles: `\n    :host {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 6px 8px 6px 14px;\n      border: none;\n      background: none;\n      cursor: pointer;\n      transition: background-color 0.2s;\n      border-radius: 4px;\n      min-width: 120px;\n      text-align: start;\n      outline: none;\n      font-size: 14px;\n      font-weight: 400;\n    }\n\n    :host[data-hover] {\n      background-color: var(--ngp-background-active);\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      z-index: 1;\n    }\n  `,\n})\nexport class ContextMenuItem {}\n",
+    "primitive": "context-menu",
+    "hasVariants": false,
+    "hasSizes": true
+  },
   {
     "name": "date-picker",
     "code": "import { Component, computed } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroChevronLeftMini, heroChevronRightMini } from '@ng-icons/heroicons/mini';\nimport {\n  injectDatePickerState,\n  NgpDatePicker,\n  NgpDatePickerCell,\n  NgpDatePickerCellRender,\n  NgpDatePickerDateButton,\n  NgpDatePickerGrid,\n  NgpDatePickerLabel,\n  NgpDatePickerNextMonth,\n  NgpDatePickerPreviousMonth,\n  NgpDatePickerRowRender,\n} from 'ng-primitives/date-picker';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-date-picker',\n  hostDirectives: [\n    {\n      directive: NgpDatePicker,\n      inputs: [\n        'ngpDatePickerDate: date',\n        'ngpDatePickerMin: min',\n        'ngpDatePickerMax: max',\n        'ngpDatePickerDisabled: disabled',\n      ],\n      outputs: ['ngpDatePickerDateChange: dateChange'],\n    },\n  ],\n  imports: [\n    NgIcon,\n    NgpDatePickerLabel,\n    NgpDatePickerNextMonth,\n    NgpDatePickerPreviousMonth,\n    NgpDatePickerGrid,\n    NgpDatePickerCell,\n    NgpDatePickerRowRender,\n    NgpDatePickerCellRender,\n    NgpDatePickerDateButton,\n  ],\n  providers: [\n    provideIcons({ heroChevronRightMini, heroChevronLeftMini }),\n    provideValueAccessor(DatePicker),\n  ],\n  template: `\n    <div class=\"date-picker-header\">\n      <button ngpDatePickerPreviousMonth aria-label=\"previous month\">\n        <ng-icon name=\"heroChevronLeftMini\" />\n      </button>\n      <h2 ngpDatePickerLabel>{{ label() }}</h2>\n      <button ngpDatePickerNextMonth aria-label=\"next month\">\n        <ng-icon name=\"heroChevronRightMini\" />\n      </button>\n    </div>\n    <table ngpDatePickerGrid>\n      <thead>\n        <tr>\n          <th scope=\"col\" abbr=\"Sunday\">S</th>\n          <th scope=\"col\" abbr=\"Monday\">M</th>\n          <th scope=\"col\" abbr=\"Tuesday\">T</th>\n          <th scope=\"col\" abbr=\"Wednesday\">W</th>\n          <th scope=\"col\" abbr=\"Thursday\">T</th>\n          <th scope=\"col\" abbr=\"Friday\">F</th>\n          <th scope=\"col\" abbr=\"Saturday\">S</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngpDatePickerRowRender>\n          <td *ngpDatePickerCellRender=\"let date\" ngpDatePickerCell>\n            <button ngpDatePickerDateButton>\n              {{ date.getDate() }}\n            </button>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  `,\n  styles: `\n    :host {\n      display: inline-block;\n      background-color: var(--ngp-background);\n      border-radius: 12px;\n      padding: 16px;\n      box-shadow: var(--ngp-shadow);\n      border: 1px solid var(--ngp-border);\n    }\n\n    .date-picker-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      height: 36px;\n      margin-bottom: 16px;\n    }\n\n    th {\n      font-size: 14px;\n      font-weight: 500;\n      width: 40px;\n      height: 40px;\n      text-align: center;\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpDatePickerLabel] {\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--ngp-text-primary);\n    }\n\n    [ngpDatePickerPreviousMonth],\n    [ngpDatePickerNextMonth] {\n      all: unset;\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      font-size: 20px;\n      border: 1px solid var(--ngp-border);\n      cursor: pointer;\n    }\n\n    [ngpDatePickerPreviousMonth][data-hover],\n    [ngpDatePickerNextMonth][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpDatePickerPreviousMonth][data-focus-visible],\n    [ngpDatePickerNextMonth][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n    }\n\n    [ngpDatePickerPreviousMonth][data-press],\n    [ngpDatePickerNextMonth][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpDatePickerPreviousMonth][data-disabled],\n    [ngpDatePickerNextMonth][data-disabled] {\n      cursor: not-allowed;\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton] {\n      all: unset;\n      width: 40px;\n      height: 40px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      cursor: pointer;\n    }\n\n    [ngpDatePickerDateButton][data-today] {\n      color: var(--ngp-text-blue);\n    }\n\n    [ngpDatePickerDateButton][data-hover] {\n      background-color: var(--ngp-background-hover);\n    }\n\n    [ngpDatePickerDateButton][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpDatePickerDateButton][data-press] {\n      background-color: var(--ngp-background-active);\n    }\n\n    [ngpDatePickerDateButton][data-outside-month] {\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton][data-selected] {\n      background-color: var(--ngp-background-inverse);\n      color: var(--ngp-text-inverse);\n    }\n\n    [ngpDatePickerDateButton][data-selected][data-outside-month] {\n      background-color: var(--ngp-background-disabled);\n      color: var(--ngp-text-disabled);\n    }\n\n    [ngpDatePickerDateButton][data-disabled] {\n      cursor: not-allowed;\n      color: var(--ngp-text-disabled);\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class DatePicker implements ControlValueAccessor {\n  /** Access the date picker host directive */\n  private readonly state = injectDatePickerState<Date>();\n\n  /**\n   * Get the current focused date in string format.\n   * @returns The focused date in \"February 2024\" format.\n   */\n  readonly label = computed(\n    () =>\n      `${this.state().focusedDate().toLocaleString('default', { month: 'long' })} ${this.state().focusedDate().getFullYear()}`,\n  );\n\n  /**\n   * The onChange callback function for the date picker.\n   */\n  protected onChange?: ChangeFn<Date | undefined>;\n\n  /**\n   * The onTouched callback function for the date picker.\n   */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the date picker, call the onChange function with the new value.\n    this.state().dateChange.subscribe(date => this.onChange?.(date));\n  }\n\n  writeValue(date: Date): void {\n    this.state().select(date);\n  }\n\n  registerOnChange(fn: ChangeFn<Date | undefined>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().disabled.set(isDisabled);\n  }\n}\n",