@primeng/mcp 21.1.1 → 21.1.2

package/dist/index.js

@@ -6,7 +6,7 @@ import { runPrimeMcpServer } from "@primeuix/mcp";
 // data/components.json
 var components_default = {
   version: "1.0.0",
-  generatedAt: "2026-01-28",
+  generatedAt: "2026-03-03",
   components: [
     {
       name: "accordion",
@@ -15867,6 +15867,30 @@ export class DatepickerInvalidDemo {
           description: "Locale for different languages and formats is defined globally, refer to the PrimeNG Locale configuration for more information.",
           examples: null
         },
+        {
+          id: "mask",
+          label: "Mask",
+          description: "DatePicker can be used with the pInputMask directive to enforce a specific input format.",
+          examples: {
+            typescript: `import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DatePickerModule } from 'primeng/datepicker';
+import { InputMaskModule } from 'primeng/inputmask';
+
+@Component({
+    template: \`
+        <div class="card flex justify-center">
+            <p-datepicker [(ngModel)]="date" dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" pInputMask="99/99/9999" />
+        </div>
+    \`,
+    standalone: true,
+    imports: [DatePickerModule, InputMaskModule, FormsModule]
+})
+export class DatepickerMaskDemo {
+    date: Date | undefined;
+}`
+          }
+        },
         {
           id: "methods",
           label: "methods-doc",
@@ -15876,10 +15900,45 @@ export class DatepickerInvalidDemo {
           }
         },
         {
-          id: "minmaxdox.ts",
-          label: "minmaxdox",
+          id: "minmax",
+          label: "Min / Max",
           description: "Boundaries for the permitted dates that can be entered are defined with minDate and maxDate properties.",
-          examples: null
+          examples: {
+            typescript: `import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DatePickerModule } from 'primeng/datepicker';
+
+@Component({
+    template: \`
+        <div class="card flex justify-center">
+            <p-datepicker [(ngModel)]="date" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true" />
+        </div>
+    \`,
+    standalone: true,
+    imports: [DatePickerModule, FormsModule]
+})
+export class DatepickerMinmaxDemo implements OnInit {
+    date: Date | undefined;
+    minDate: Date | undefined;
+    maxDate: Date | undefined;
+
+    ngOnInit() {
+        let today = new Date();
+        let month = today.getMonth();
+        let year = today.getFullYear();
+        let prevMonth = month === 0 ? 11 : month - 1;
+        let prevYear = prevMonth === 11 ? year - 1 : year;
+        let nextMonth = month === 11 ? 0 : month + 1;
+        let nextYear = nextMonth === 0 ? year + 1 : year;
+        this.minDate = new Date();
+        this.minDate.setMonth(prevMonth);
+        this.minDate.setFullYear(prevYear);
+        this.maxDate = new Date();
+        this.maxDate.setMonth(nextMonth);
+        this.maxDate.setFullYear(nextYear);
+    }
+}`
+          }
         },
         {
           id: "month",
@@ -15928,8 +15987,8 @@ export class DatepickerMultipleDemo {
           }
         },
         {
-          id: "multiplemonths.",
-          label: "multiplemonths.-doc",
+          id: "multiplemonths",
+          label: "Multiple Months",
           description: "Number of months to display is configured with the numberOfMonths property.",
           examples: {
             typescript: `import { Component } from '@angular/core';
@@ -15945,7 +16004,7 @@ import { DatePickerModule } from 'primeng/datepicker';
     standalone: true,
     imports: [DatePickerModule, FormsModule]
 })
-export class DatepickerMultiplemonths.Demo {
+export class DatepickerMultiplemonthsDemo {
     date: Date[] | undefined;
 }`
           }
@@ -26459,9 +26518,9 @@ export class InputgroupMultipleDemo {}`
         {
           id: "accessibility",
           label: "Accessibility",
-          description: "Screen Reader InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy , ariaLabel props.",
+          description: "Screen Reader InputMask directive is used with a native input element that implicitly includes any passed attribute. Value to describe the component can either be provided via label tag combined with id attribute or using aria-labelledby , aria-label attributes.",
           examples: {
-            typescript: '<label for="date">Date</label>\n<p-inputmask inputId="date"/>\n\n<span id="phone">Phone</span>\n<p-inputmask ariaLabelledBy="phone"/>\n\n<p-inputmask ariaLabel="Age"/>'
+            typescript: '<label for="date">Date</label>\n<input pInputText id="date" pInputMask="99/99/9999" />\n\n<span id="phone">Phone</span>\n<input pInputText pInputMask="(999) 999-9999" aria-labelledby="phone" />\n\n<input pInputText pInputMask="99" aria-label="Age" />'
           }
         },
         {
@@ -26471,16 +26530,17 @@ export class InputgroupMultipleDemo {}`
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex justify-center">
-            <p-inputmask mask="99-999999" [(ngModel)]="value" placeholder="99-999999" />
+            <input pInputText pInputMask="99-999999" [(ngModel)]="value" placeholder="99-999999" />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskBasicDemo {
     value: string | undefined;
@@ -26489,7 +26549,7 @@ export class InputmaskBasicDemo {
         },
         {
           id: "clearicon",
-          label: "Clear Icon",
+          label: "clearicon-doc",
           description: "When showClear is enabled, a clear icon is displayed to clear the value.",
           examples: {
             typescript: `import { Component } from '@angular/core';
@@ -26517,16 +26577,17 @@ export class InputmaskCleariconDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex justify-center">
-            <p-inputmask mask="999-99-9999" [(ngModel)]="value" [disabled]="true" />
+            <input pInputText pInputMask="999-99-9999" [(ngModel)]="value" disabled />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskDisabledDemo {
     value: string | undefined;
@@ -26540,16 +26601,17 @@ export class InputmaskDisabledDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex justify-center">
-            <p-inputmask mask="99-999999" [(ngModel)]="value" variant="filled" placeholder="99-999999" />
+            <input pInputText pInputMask="99-999999" [(ngModel)]="value" variant="filled" placeholder="99-999999" />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskFilledDemo {
     value: string | undefined;
@@ -26564,27 +26626,28 @@ export class InputmaskFilledDemo {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { FloatLabelModule } from 'primeng/floatlabel';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex flex-wrap justify-center items-end gap-4">
             <p-floatlabel>
-                <p-inputmask id="over_label" [(ngModel)]="value1" mask="999-99-9999" />
+                <input pInputText id="over_label" [(ngModel)]="value1" pInputMask="999-99-9999" />
                 <label for="over_label">Over Label</label>
             </p-floatlabel>
             <p-floatlabel variant="in">
-                <p-inputmask id="in_label" [(ngModel)]="value2" mask="999-99-9999" />
+                <input pInputText id="in_label" [(ngModel)]="value2" pInputMask="999-99-9999" />
                 <label for="in_label">In Label</label>
             </p-floatlabel>
             <p-floatlabel variant="on">
-                <p-inputmask id="on_label" [(ngModel)]="value3" mask="999-99-9999" />
+                <input pInputText id="on_label" [(ngModel)]="value3" pInputMask="999-99-9999" />
                 <label for="on_label">On Label</label>
             </p-floatlabel>
         </div>
     \`,
     standalone: true,
-    imports: [FloatLabelModule, InputMaskModule, FormsModule]
+    imports: [FloatLabelModule, InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskFloatlabelDemo {
     value1: string | undefined;
@@ -26600,16 +26663,17 @@ export class InputmaskFloatlabelDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card">
-            <p-inputmask mask="99-999999" [(ngModel)]="value" placeholder="99-999999" fluid />
+            <input pInputText pInputMask="99-999999" [(ngModel)]="value" placeholder="99-999999" fluid />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskFluidDemo {
     value: string | undefined;
@@ -26624,19 +26688,20 @@ export class InputmaskFluidDemo {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IftaLabelModule } from 'primeng/iftalabel';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex justify-center">
             <p-iftalabel>
-                <p-inputmask id="ssn" [(ngModel)]="value" mask="999-99-9999" autocomplete="off" />
+                <input pInputText id="ssn" [(ngModel)]="value" pInputMask="999-99-9999" autocomplete="off" />
                 <label for="ssn">SSN</label>
             </p-iftalabel>
         </div>
     \`,
     standalone: true,
-    imports: [IftaLabelModule, InputMaskModule, FormsModule]
+    imports: [IftaLabelModule, InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskIftalabelDemo {
     value: string | undefined;
@@ -26650,17 +26715,18 @@ export class InputmaskIftalabelDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex flex-wrap justify-center gap-4">
-            <p-inputmask [(ngModel)]="value1" mask="99-999999" placeholder="Serial Key" [invalid]="!value1" />
-            <p-inputmask [(ngModel)]="value2" mask="99-999999" placeholder="Serial Key" [invalid]="!value2" variant="filled" />
+            <input pInputText [(ngModel)]="value1" pInputMask="99-999999" placeholder="Serial Key" [invalid]="!value1" />
+            <input pInputText [(ngModel)]="value2" pInputMask="99-999999" placeholder="Serial Key" [invalid]="!value2" variant="filled" />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskInvalidDemo {
     value1: string | undefined;
@@ -26675,6 +26741,7 @@ export class InputmaskInvalidDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
@@ -26682,20 +26749,20 @@ import { InputMaskModule } from 'primeng/inputmask';
         <p-fluid class="card flex flex-wrap gap-4">
             <div class="flex-auto">
                 <span class="font-bold block mb-2">SSN</span>
-                <p-inputmask mask="999-99-9999" [(ngModel)]="value1" placeholder="999-99-9999" />
+                <input pInputText pInputMask="999-99-9999" [(ngModel)]="value1" placeholder="999-99-9999" />
             </div>
             <div class="flex-auto">
                 <span class="font-bold block mb-2">Phone</span>
-                <p-inputmask mask="(999) 999-9999" [(ngModel)]="value2" placeholder="(999) 999-9999" />
+                <input pInputText pInputMask="(999) 999-9999" [(ngModel)]="value2" placeholder="(999) 999-9999" />
             </div>
             <div class="flex-auto">
                 <span class="font-bold block mb-2">Serial Number</span>
-                <p-inputmask mask="a*-999-a999" [(ngModel)]="value3" placeholder="a*-999-a999" />
+                <input pInputText pInputMask="a*-999-a999" [(ngModel)]="value3" placeholder="a*-999-a999" />
             </div>
         </p-fluid>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskMaskDemo {
     value1: string | undefined;
@@ -26711,16 +26778,17 @@ export class InputmaskMaskDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex justify-center">
-            <p-inputmask mask="(999) 999-9999? x99999" [(ngModel)]="value" placeholder="(999) 999-9999? x99999" />
+            <input pInputText pInputMask="(999) 999-9999? x99999" [(ngModel)]="value" placeholder="(999) 999-9999? x99999" />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskOptionalDemo {
     value: string | undefined;
@@ -26734,10 +26802,11 @@ export class InputmaskOptionalDemo {
           examples: {
             typescript: `import { Component, inject } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { InputMaskModule } from 'primeng/inputmask';
 import { MessageModule } from 'primeng/message';
 import { ToastModule } from 'primeng/toast';
 import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { InputMaskModule } from 'primeng/inputmask';
 import { MessageService } from 'primeng/api';
 
 @Component({
@@ -26746,7 +26815,7 @@ import { MessageService } from 'primeng/api';
         <div class="card flex justify-center">
             <form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4 sm:w-56">
                 <div class="flex flex-col gap-1">
-                    <p-inputmask mask="99-999999" formControlName="value" placeholder="99-999999" [invalid]="isInvalid('value')" fluid />
+                    <input pInputText pInputMask="99-999999" formControlName="value" placeholder="99-999999" [invalid]="isInvalid('value')" fluid />
                     @if (isInvalid('value')) {
                         <p-message severity="error" size="small" variant="simple">Serial number is required.</p-message>
                     }
@@ -26756,7 +26825,7 @@ import { MessageService } from 'primeng/api';
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, MessageModule, ToastModule, ButtonModule, ReactiveFormsModule]
+    imports: [MessageModule, ToastModule, ButtonModule, InputTextModule, InputMaskModule, ReactiveFormsModule]
 })
 export class InputmaskReactiveformsDemo {
     messageService = inject(MessageService);
@@ -26793,18 +26862,19 @@ export class InputmaskReactiveformsDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex flex-col items-center gap-4">
-            <p-inputmask [(ngModel)]="value1" placeholder="Small" size="small" mask="99-999999" />
-            <p-inputmask [(ngModel)]="value2" placeholder="Normal" mask="99-999999" />
-            <p-inputmask [(ngModel)]="value3" placeholder="Large" size="large" mask="99-999999" />
+            <input pInputText [(ngModel)]="value1" placeholder="Small" pSize="small" pInputMask="99-999999" />
+            <input pInputText [(ngModel)]="value2" placeholder="Normal" pInputMask="99-999999" />
+            <input pInputText [(ngModel)]="value3" placeholder="Large" pSize="large" pInputMask="99-999999" />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskSizesDemo {
     value1: string | undefined;
@@ -26820,16 +26890,17 @@ export class InputmaskSizesDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex justify-center">
-            <p-inputmask [(ngModel)]="value" mask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
+            <input pInputText [(ngModel)]="value" pInputMask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskSlotcharDemo {
     value: string | undefined;
@@ -26843,10 +26914,11 @@ export class InputmaskSlotcharDemo {
           examples: {
             typescript: `import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { InputMaskModule } from 'primeng/inputmask';
 import { MessageModule } from 'primeng/message';
 import { ToastModule } from 'primeng/toast';
 import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { InputMaskModule } from 'primeng/inputmask';
 import { MessageService } from 'primeng/api';
 
 @Component({
@@ -26855,7 +26927,7 @@ import { MessageService } from 'primeng/api';
         <div class="card flex justify-center">
             <form #exampleForm="ngForm" (ngSubmit)="onSubmit(exampleForm)" class="flex justify-center flex-col gap-4 md:w-56">
                 <div class="flex flex-col gap-1">
-                    <p-inputmask name="serial" mask="99-999999" #serialNumber="ngModel" [(ngModel)]="value" placeholder="99-999999" [invalid]="serialNumber.invalid && (serialNumber.touched || exampleForm.submitted)" required fluid />
+                    <input pInputText name="serial" pInputMask="99-999999" #serialNumber="ngModel" [(ngModel)]="value" placeholder="99-999999" [invalid]="serialNumber.invalid && (serialNumber.touched || exampleForm.submitted)" required fluid />
                     @if (serialNumber.invalid && (serialNumber.touched || exampleForm.submitted)) {
                         <p-message severity="error" size="small" variant="simple">Serial number is required.</p-message>
                     }
@@ -26865,7 +26937,7 @@ import { MessageService } from 'primeng/api';
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, MessageModule, ToastModule, ButtonModule, FormsModule]
+    imports: [MessageModule, ToastModule, ButtonModule, InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskTemplatedrivenformsDemo {
     messageService = inject(MessageService);
@@ -40618,9 +40690,9 @@ export class PanelToggleableDemo {}`
             description: "Defines template option for header."
           },
           {
-            name: "icon",
+            name: "icons",
             type: "TemplateRef<void>",
-            description: "Defines template option for icon."
+            description: "Defines template option for icons."
           },
           {
             name: "content",
@@ -73839,7 +73911,7 @@ export class TreetableTemplateDemo implements OnInit {
 // package.json
 var package_default = {
   name: "@primeng/mcp",
-  version: "21.1.1",
+  version: "21.1.2",
   author: "PrimeTek Informatics",
   description: "Model Context Protocol (MCP) server for PrimeNg component library",
   homepage: "https://primeng.org/",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primeng/mcp",
-  "version": "21.1.1",
+  "version": "21.1.2",
   "author": "PrimeTek Informatics",
   "description": "Model Context Protocol (MCP) server for PrimeNg component library",
   "homepage": "https://primeng.org/",