@primeng/mcp 21.1.2 → 21.1.4

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-03-03",
+  generatedAt: "2026-03-04",
   components: [
     {
       name: "accordion",
@@ -908,9 +908,7 @@ export class AnimateonscrollBasicDemo {}`
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel props. The input element has combobox role in addition to aria-autocomplete , aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which option to read during keyboard navigation within the popup list. In multiple mode, chip list uses listbox role whereas each chip has the option role with aria-label set to the label of the chip. The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the input element.",
-          examples: {
-            typescript: '<label for="ac1">Username</label>\n<p-autocomplete inputId="ac1"/>\n\n<span id="ac2">Email</span>\n<p-autocomplete ariaLabelledBy="ac2" />\n\n<p-autocomplete ariaLabel="City" />'
-          }
+          examples: null
         },
         {
           id: "advanced-chips",
@@ -4651,9 +4649,7 @@ export class BreadcrumbTemplateDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the aria-label prop, if not present label prop is used as the value. If the button is icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly.",
-          examples: {
-            typescript: '<p-button icon="pi pi-check" aria-label="Submit" />\n<p-button icon="pi pi-check" label="Submit" />\n\n<p-button class="youtube p-0" aria-label="Youtube">\n    <i class="pi pi-youtube px-2"></i>\n    <span class="px-4">Youtube</span>\n</p-button>'
-          }
+          examples: null
         },
         {
           id: "badge",
@@ -7404,9 +7400,7 @@ export class CarouselVerticalDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The cascadeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup. The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label , aria-selected and aria-expanded attributes. The container element of a treenode has the group role. The aria-setsize , aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem.",
-          examples: {
-            typescript: '<span id="dd1">Options</span>\n<p-cascadeselect ariaLabelledBy="dd1"/>\n\n<p-cascadeselect ariaLabel="Options"/>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -15492,9 +15486,7 @@ export class DataviewSortingDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: 'Screen Reader Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby , aria-label props. The input element has combobox role in addition to aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the popup. The optional DatePicker button requires includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the chooseDate key of the aria property from the locale API. This label is also used for the aria-label of the popup as well. When there is a value selected, it is formatted and appended to the label to be able to notify users about the current value. Popup has a dialog role along with aria-modal and aria-label . The navigation buttons at the header has an aria-label retrieved from the prevYear , nextYear , prevMonth , nextMonth , prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys. Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date value. Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute. Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour , nextHour , prevMinute , nextMinute , prevSecond , nextSecond , am and pm keys. DatePicker also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.',
-          examples: {
-            typescript: '<label for="date1">Date</label>\n<p-datepicker inputId="date1"/>\n\n<span id="date2">Date</span>\n<p-datepicker ariaLabelledBy="date2"/>\n\n<p-datepicker ariaLabel="Date"/>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -17847,13 +17839,7 @@ export class DatepickerYearDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Dialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup. It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. Trigger element also requires aria-expanded and aria-controls to be handled explicitly. Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may use closeButtonProps to customize the element and override the default aria-label . Maximize element is a button with an aria-label that refers to the aria.maximizeLabel and aria.minimizeLabel property of the locale API. It cannot be customized using the maximizeButtonProps . Overlay Keyboard Support Key Function tab Moves focus to the next the focusable element within the dialog. shift + tab Moves focus to the previous the focusable element within the dialog. escape Closes the dialog if closeOnEscape is true. Close Button Keyboard Support Key Function enter Closes the dialog. space Closes the dialog.",
-          examples: {
-            typescript: `<p-button icon="pi pi-external-link" (click)="visible = true" aria-controls="{{visible ? 'dialog' : null}}" aria-expanded="{{visible ? true : false}}" />
-
-<p-dialog id="dialog" header="Header" [(visible)]="visible" [style]="{ width: '50vw' }" (onHide)="visible = false">
-    <p>Content</p>
-</p-dialog>`
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -20287,22 +20273,7 @@ export class DragdropDropindicatorDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Drawer component uses complementary role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like aria-labelledby can be added. In addition aria-modal is added since focus is kept within the drawer when opened. It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. Trigger element also requires aria-expanded and aria-controls to be handled explicitly. Overlay Keyboard Support Key Function tab Moves focus to the next the focusable element within the drawer. shift + tab Moves focus to the previous the focusable element within the drawer. escape Closes the dialog if closeOnEscape is true. Close Button Keyboard Support Key Function enter Closes the drawer. space Closes the drawer.",
-          examples: {
-            typescript: `<p-button
-    icon="pi pi-arrow-right"
-    (click)="visible = true"
-    aria-controls="{{visible ? 'drawer' : null}}"
-    aria-expanded="{{visible ? true : false}}"
-></p-button>
-<p-drawer
-    [(visible)]="visible"
-    id="drawer"
-    (onHide)="visible = false"
-    role="region"
->
-    content
-</p-drawer>`
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -25524,9 +25495,7 @@ export class IftalabelInvalidDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader ImageComponent component uses a native range slider internally. Value to describe the component can be defined using aria-labelledby and aria-label props. Keyboard Support Key Function tab Moves focus to the component. left arrow up arrow Decrements the value. right arrow down arrow Increments the value. home Set the minimum value. end Set the maximum value. page up Increments the value by 10 steps. page down Decrements the value by 10 steps.",
-          examples: {
-            typescript: '<span id="image_label">Compare Images</span>\n<p-imagecompare class="shadow-lg rounded-2xl" aria-labelledby="image-label">\n    ...\n</p-imagecompare>\n\n<p-imagecompare class="shadow-lg rounded-2xl" aria-label="Compare Images">\n    ...\n</p-imagecompare>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -26519,9 +26488,7 @@ export class InputgroupMultipleDemo {}`
           id: "accessibility",
           label: "Accessibility",
           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<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" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -27337,9 +27304,7 @@ export class InputmaskTemplatedrivenformsDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel , ariaDescribedBy props. The input element uses spinbutton role in addition to the aria-valuemin , aria-valuemax and aria-valuenow attributes.",
-          examples: {
-            typescript: '<label for="price">Price</label>\n<p-inputnumber inputId="price" />\n\n<span id="label_number">Number</span>\n<p-inputnumber ariaLabelledBy="label_number" />\n\n<p-inputnumber ariaLabel="Number" />\n\n<p-inputnumber ariaDescribedBy="describe" />\n<small id="describe">Information</small>'
-          }
+          examples: null
         },
         {
           id: "buttons",
@@ -28959,9 +28924,7 @@ export class InputotpTemplatedrivenformsDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader InputText 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 aria-labelledby , aria-label props.",
-          examples: {
-            typescript: '<label for="firstname">Firstname</label>\n<input pInputText id="firstname" />\n\n<span id="lastname">Lastname</span>\n<input pInputText aria-labelledby="lastname" />\n\n<input pInputText aria-label="Age" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -29759,9 +29722,7 @@ export class KeyfilterRegexDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Knob element component uses slider role in addition to the aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using ariaLabelledBy and ariaLabel props.",
-          examples: {
-            typescript: '<span id="label_number">Number</span>\n<p-knob ariaLabelledBy="label_number"/>\n\n<p-knob ariaLabel="Number"/>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -30429,9 +30390,7 @@ export class KnobTemplatedrivenformsDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can be provided ariaLabelledBy or ariaLabel props. The list element has a listbox role with the aria-multiselectable attribute that sets to true when multiple selection is enabled. Each list item has an option role with aria-selected and aria-disabled as their attributes.",
-          examples: {
-            typescript: '<span id="lb">Options</span>\n<p-listbox ariaLabelledBy="lb"/>\n\n<p-listbox ariaLabel="City"/>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -36102,9 +36061,7 @@ export class MetergroupVerticalDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The multiselect component has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls attribute that refers to the id of the popup listbox. The popup listbox uses listbox as the role with aria-multiselectable enabled. Each list item has an option role along with aria-label , aria-selected and aria-disabled attributes. Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the selectAll and unselectAll keys of the aria property from the locale API. If filtering is enabled, filterInputProps can be defined to give aria-* props to the input element. Close button uses close key of the aria property from the locale API as the aria-label by default, this can be overriden with the closeButtonProps .",
-          examples: {
-            typescript: '<span id="dd1">Options</span>\n<p-multiselect ariaLabelledBy="dd1"/>\n\n<p-multiselect ariaLabel="Options"/>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -38143,9 +38100,7 @@ export class MultiselectVirtualscrollDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes. Controls buttons are button elements with an aria-label that refers to the aria.moveTop , aria.moveUp , aria.moveDown , aria.moveBottom , aria.moveTo , aria.moveAllTo , aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may use moveTopButtonProps , moveUpButtonProps , moveDownButtonProps , moveToButtonProps , moveAllToButtonProps , moveFromButtonProps , moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. OrderList Keyboard Support Key Function tab Moves focus to the first selected option, if there is none then first option receives the focus. up arrow Moves focus to the previous option. down arrow Moves focus to the next option. enter Toggles the selected state of the focused option. space Toggles the selected state of the focused option. home Moves focus to the first option. end Moves focus to the last option. shift + down arrow Moves focus to the next option and toggles the selection state. shift + up arrow Moves focus to the previous option and toggles the selection state. shift + space Selects the items between the most recently selected option and the focused option. control + shift + home Selects the focused options and all the options up to the first one. control + shift + end Selects the focused options and all the options down to the first one. control + a Selects all options. Buttons Keyboard Support Key Function enter Executes button action. space Executes button action.",
-          examples: {
-            typescript: '<span id="lb">Options</span>\n<p-orderlist ariaLabelledBy="lb" />\n\n<p-orderlist ariaLabel="City" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -41916,9 +41871,7 @@ export class PanelmenuTemplateDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy , ariaLabel props. Screen reader is notified about the changes to the strength of the password using a section that has aria-live while typing.",
-          examples: {
-            typescript: '<label for="pwd1">Password</label>\n<p-password inputId="pwd1" />\n\n<span id="pwd2">Password</span>\n<p-password ariaLabelledBy="pwd2" />\n\n<p-password ariaLabel="Password" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -42928,9 +42881,7 @@ export class PasswordTogglemaskDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the source listbox and target listbox can be provided with ariaLabelledBy or ariaLabel props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes. Controls buttons are button elements with an aria-label that refers to the aria.moveTop , aria.moveUp , aria.moveDown , aria.moveBottom , aria.moveTo , aria.moveAllTo , aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may use moveTopButtonProps , moveUpButtonProps , moveDownButtonProps , moveToButtonProps , moveAllToButtonProps , moveFromButtonProps , moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. PickList Keyboard Support Key Function tab Moves focus to the first selected option, if there is none then first option receives the focus. up arrow Moves focus to the previous option. down arrow Moves focus to the next option. enter Toggles the selected state of the focused option. space Toggles the selected state of the focused option. home Moves focus to the first option. end Moves focus to the last option. shift + down arrow Moves focus to the next option and toggles the selection state. shift + up arrow Moves focus to the previous option and toggles the selection state. shift + space Selects the items between the most recently selected option and the focused option. control + shift + home Selects the focused options and all the options up to the first one. control + shift + end Selects the focused options and all the options down to the first one. control + a Selects all options. Buttons Keyboard Support Key Function enter Executes button action. space Executes button action.",
-          examples: {
-            typescript: '<span id="lb">Options</span>\n<p-picklist ariaLabelledBy="lb" />\n\n<p-picklist ariaLabel="City" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -44439,9 +44390,7 @@ export class PopoverTemplateDemo {}`
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader ProgressBar components uses progressbar role along with aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby and aria-label props.",
-          examples: {
-            typescript: '<span id="label_status">Status</span>\n<p-progressbar aria-labelledby="label_status" />\n\n<p-progressbar aria-label="Status" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -44734,9 +44683,7 @@ export class ProgressbarTemplateDemo {}`
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader ProgressSpinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props.",
-          examples: {
-            typescript: '<p-progress-spinner aria-label="Loading"></p-progress-spinner>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -44904,9 +44851,7 @@ export class ProgressspinnerCustomDemo {}`
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel props.",
-          examples: {
-            typescript: '<label for="rb1">One</label>\n<p-radiobutton inputId="rb1" />\n\n<span id="rb2">Two</span>\n<p-radiobutton ariaLabelledBy="rb2" />\n\n<p-radiobutton ariaLabel="Three" />'
-          }
+          examples: null
         },
         {
           id: "disabled",
@@ -46258,303 +46203,43 @@ export class RippleDefaultDemo {}`
           id: "basic",
           label: "Basic",
           description: "VirtualScroller requires items as the data to display, itemSize for the dimensions of an item and item template are required on component. In addition, an initial array is required based on the total number of items to display. Size of the viewport is configured using scrollWidth , scrollHeight properties directly or with CSS width and height styles.",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex justify-center">
-            <p-virtualscroller [items]="items" [itemSize]="50" scrollHeight="200px" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template #item let-item let-options="options">
-                    <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                        {{ item }}
-                    </div>
-                </ng-template>
-            </p-virtualscroller>
-        </div>
-    \`,
-    standalone: true,
-    imports: [VirtualScrollerModule]
-})
-export class ScrollerBasicDemo implements OnInit {
-    items!: string[];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "delay",
           label: "Delay",
           description: "Scroll delay is adjusted by using delay property.",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex flex-wrap justify-center gap-4">
-            <div>
-                <span class="font-bold block mb-2">No Delay</span>
-                <p-virtualscroller [items]="items" [itemSize]="50" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template #item let-item let-options="options">
-                        <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                            {{ item }}
-                        </div>
-                    </ng-template>
-                </p-virtualscroller>
-            </div>
-            <div>
-                <span class="font-bold block mb-2">150ms</span>
-                <p-virtualscroller [items]="items" [itemSize]="50" [delay]="150" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template #item let-item let-options="options">
-                        <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                            {{ item }}
-                        </div>
-                    </ng-template>
-                </p-virtualscroller>
-            </div>
-            <div>
-                <span class="font-bold block mb-2">500ms</span>
-                <p-virtualscroller [items]="items" [itemSize]="50" [delay]="500" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template #item let-item let-options="options">
-                        <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                            {{ item }}
-                        </div>
-                    </ng-template>
-                </p-virtualscroller>
-            </div>
-        </div>
-    \`,
-    standalone: true,
-    imports: [VirtualScrollerModule]
-})
-export class ScrollerDelayDemo implements OnInit {
-    items!: string[];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "grid",
           label: "Grid",
           description: "Scrolling can be enabled vertically and horizontally when orientation is set as both . In this mode, itemSize should be an array where first value is the height of an item and second is the width.",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex justify-center">
-            <p-virtualscroller [items]="items" [itemSize]="[50, 100]" orientation="both" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template #item let-item let-options="options">
-                    <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                        <div *ngFor="let el of item" style="width: 100px">{{ el }}</div>
-                    </div>
-                </ng-template>
-            </p-virtualscroller>
-        </div>
-    \`,
-    standalone: true,
-    imports: [VirtualScrollerModule]
-})
-export class ScrollerGridDemo implements OnInit {
-    items!: string[][];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`));
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "horizontal",
           label: "Horizontal",
           description: "Setting orientation to horizontal enables scrolling horizontally. In this case, the itemSize should refer to the width of an item.",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex justify-center">
-            <p-virtualscroller [items]="items" [itemSize]="50" scrollHeight="200px" orientation="horizontal" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template #item let-item let-options="options">
-                    <div class="flex items-center p-2" style="writing-mode: vertical-lr; width: 50px;" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }">
-                        {{ item }}
-                    </div>
-                </ng-template>
-            </p-virtualscroller>
-        </div>
-    \`,
-    standalone: true,
-    imports: [VirtualScrollerModule]
-})
-export class ScrollerHorizontalDemo implements OnInit {
-    items!: string[];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "lazyload",
           label: "lazyload-doc",
           description: "Lazy mode is handy to deal with large datasets where instead of loading the entire data, small chunks of data are loaded on demand by invoking onLazyLoad callback everytime scrolling requires a new chunk. To implement lazy loading, enable lazy attribute, initialize your data as a placeholder with a length and finally implement a method callback using onLazyLoad that actually loads a chunk from a datasource. onLazyLoad gets an event object that contains information about the chunk of data to load such as the index and number of items to load. Notice that a new template called loadingItem is also required to display as a placeholder while the new items are being loaded.",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-interface LazyEvent {
-    first: number;
-    last: number;
-}
-
-@Component({
-    template: \`
-        <div class="card flex justify-center">
-            <p-virtualscroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" [loading]="lazyLoading" [lazy]="true" (onLazyLoad)="onLazyLoad($event)" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template #item let-item let-options="options">
-                    <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                        {{ item }}
-                    </div>
-                </ng-template>
-            </p-virtualscroller>
-        </div>
-    \`,
-    standalone: true,
-    imports: [VirtualScrollerModule]
-})
-export class ScrollerLazyloadDemo implements OnInit {
-    items!: string[];
-    lazyLoading: boolean = true;
-    loadLazyTimeout: any;
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 });
-    }
-
-    onLazyLoad(event: LazyEvent) {
-        this.lazyLoading = true;
-        
-        if (this.loadLazyTimeout) {
-            clearTimeout(this.loadLazyTimeout);
-        }
-        
-        //imitate delay of a backend call
-        this.loadLazyTimeout = setTimeout(
-            () => {
-                const { first, last } = event;
-                const lazyItems = [...this.items];
-        
-                for (let i = first; i < last; i++) {
-                    lazyItems[i] = \`Item #\${i}\`;
-                }
-        
-                this.items = lazyItems;
-                this.lazyLoading = false;
-                this.cd.markForCheck();
-            },
-            Math.random() * 1000 + 250
-        );
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "loader",
           label: "loader-doc",
           description: "Busy state is enabled by adding showLoader property which blocks the UI with a modal by default. Alternatively, loader template can be used to customize items e.g. with Skeleton .",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { SkeletonModule } from 'primeng/skeleton';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex flex-wrap justify-center gap-4">
-            <div>
-                <p-virtualscroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template #item let-item let-options="options">
-                        <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                            {{ item }}
-                        </div>
-                    </ng-template>
-                </p-virtualscroller>
-            </div>
-            <div>
-                <p-virtualscroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template #item let-item let-options="options">
-                        <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                            {{ item }}
-                        </div>
-                    </ng-template>
-                    <ng-template pTemplate="loader" let-options="options">
-                        <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                            <p-skeleton [width]="options.even ? '60%' : '50%'" height="1.3rem"></p-skeleton>
-                        </div>
-                    </ng-template>
-                </p-virtualscroller>
-            </div>
-        </div>
-    \`,
-    standalone: true,
-    imports: [SkeletonModule, VirtualScrollerModule]
-})
-export class ScrollerLoaderDemo implements OnInit {
-    items!: string[];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "programmatic",
           label: "Programmatic",
           description: "Scrolling to a specific index can be done with the scrollToIndex function.",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { ButtonModule } from 'primeng/button';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex flex-col items-center gap-4">
-            <p-button label="Reset" (click)="reset()" />
-            <p-virtualscroller #sc [items]="items" [itemSize]="50" scrollHeight="200px" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template #item let-item let-options="options">
-                    <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                        {{ item }}
-                    </div>
-                </ng-template>
-            </p-virtualscroller>
-        </div>
-    \`,
-    standalone: true,
-    imports: [ButtonModule, VirtualScrollerModule]
-})
-export class ScrollerProgrammaticDemo implements OnInit {
-    items: string[] = [];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
-    }
-
-    reset() {
-        this.sc.scrollToIndex(0, 'smooth');
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "scrolloptions",
@@ -46566,51 +46251,7 @@ export class ScrollerProgrammaticDemo implements OnInit {
           id: "template",
           label: "Template",
           description: "Scroller content is customizable by using ng-template . Valid values are content , item , loader and loadericon",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { SkeletonModule } from 'primeng/skeleton';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex justify-center">
-            <p-virtualscroller [items]="items" [itemSize]="25 * 7" [showLoader]="true" [delay]="250" [numToleratedItems]="20" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template #item let-item let-options="options">
-                    <div class="flex flex-col align-items-strech" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }">
-                        <div class="flex items-center px-2" style="height: 25px">Item: {{ item }}</div>
-                        <div class="flex items-center px-2" style="height: 25px">Index: {{ options.index }}</div>
-                        <div class="flex items-center px-2" style="height: 25px">Count: {{ options.count }}</div>
-                        <div class="flex items-center px-2" style="height: 25px">First: {{ options.first }}</div>
-                        <div class="flex items-center px-2" style="height: 25px">Last: {{ options.last }}</div>
-                        <div class="flex items-center px-2" style="height: 25px">Even: {{ options.even }}</div>
-                        <div class="flex items-center px-2" style="height: 25px">Odd: {{ options.odd }}</div>
-                    </div>
-                </ng-template>
-                <ng-template #loader let-options="options">
-                    <div class="flex flex-col items-stretch" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }">
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="50%" height="1.2rem"></p-skeleton></div>
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="50%" height="1.2rem"></p-skeleton></div>
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="50%" height="1.2rem"></p-skeleton></div>
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
-                    </div>
-                </ng-template>
-            </p-virtualscroller>
-        </div>
-    \`,
-    standalone: true,
-    imports: [SkeletonModule, VirtualScrollerModule]
-})
-export class ScrollerTemplateDemo implements OnInit {
-    items!: string[];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
-    }
-}`
-          }
+          examples: null
         }
       ],
       api: {
@@ -47416,9 +47057,7 @@ export class ScrolltopElementDemo {}`
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The select element has a combobox role in addition to aria-haspopup and aria-expanded attributes. If the editable option is enabled aria-autocomplete is also added. The relation between the combobox and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which option to read during keyboard navigation within the popup list. The popup list has an id that refers to the aria-controls attribute of the combobox element and uses listbox as the role. Each list item has an option role, an id to match the aria-activedescendant of the input element along with aria-label , aria-selected and aria-disabled attributes. If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.",
-          examples: {
-            typescript: '<span id="dd1">Options</span>\n<p-select ariaLabelledBy="dd1"/>\n\n<p-select ariaLabel="Options"/>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -50443,9 +50082,7 @@ export class SkeletonShapesDemo {}`
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Slider element component uses slider role on the handle in addition to the aria-orientation , aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using ariaLabelledBy and ariaLabel props.",
-          examples: {
-            typescript: '<span id="label_number">Number</span>\n<p-slider ariaLabelledBy="label_number" />\n\n<p-slider ariaLabel="Number" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -51018,9 +50655,7 @@ export class SliderVerticalDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the aria-labelledby or aria-label props. Addititonally the button includes includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button. The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the button.",
-          examples: {
-            typescript: '<p-speeddial aria-label="Options" />'
-          }
+          examples: null
         },
         {
           id: "circle",
@@ -51863,9 +51498,7 @@ export class SpeeddialTooltipDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader SplitButton component renders two native button elements, main button uses the label property to define aria-label by default which can be customized with buttonProps . Dropdown button requires an explicit definition to describe it using menuButtonProps option and also includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button. The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the dropdown button.",
-          examples: {
-            typescript: `<p-splitbutton [buttonProps]="{'aria-label': 'Default Action'}" [menuButtonProps]="{'aria-label': 'More Options'}" />`
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -61016,9 +60649,7 @@ export class TerminalBasicDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Textarea component renders a native textarea 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 aria-labelledby , aria-label props.",
-          examples: {
-            typescript: '<label for="address1">Address 1</label>\n<textarea pTextarea id="address1"></textarea>\n\n<span id="address2">Address 2</span>\n<textarea pTextarea aria-labelledby="address2"></textarea>\n\n<textarea pTextarea aria-label="Address Details"></textarea>'
-          }
+          examples: null
         },
         {
           id: "autoresize",
@@ -64049,9 +63680,7 @@ export class ToastTemplateDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with ariaLabelledBy or ariaLabel props, it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that does not change related to state.",
-          examples: {
-            typescript: '<span id="rememberme">Remember Me</span>\n<p-togglebutton ariaLabelledBy="rememberme" />\n\n<p-togglebutton ariaLabel="Remember Me" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -64719,9 +64348,7 @@ export class TogglebuttonTemplatedrivenformsDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel props.",
-          examples: {
-            typescript: '<label for="switch1">Remember Me</label>\n<p-toggleswitch inputId="switch1" />\n\n<span id="switch2">Remember Me</span>\n<p-toggleswitch ariaLabelledBy="switch2" />\n\n<p-toggleswitch ariaLabel="Remember Me" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -65313,9 +64940,7 @@ export class ToggleswitchTemplatedrivenformsDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Toolbar uses toolbar role for the root element, aria-orientation is not included as it defaults to horizontal . Any valid attribute is passed to the root element so you may add additional properties like aria-labelledby and aria-labelled to define the element if required. Keyboard Support Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.",
-          examples: {
-            typescript: '<p-toolbar aria-label="Actions">\n    Content\n</p-toolbar>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -67449,9 +67074,7 @@ export class TreeVirtualscrolllazyDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided with ariaLabelledby or ariaLabel props. The treeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup. The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label , aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected . Checkbox and toggle icons are hidden from screen readers as their parent element with treeitem role and attributes are used instead for readers and keyboard support. The container element of a treenode has the group role. The aria-setsize , aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem. If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.",
-          examples: {
-            typescript: '<span id="dd1">Options</span>\n<p-treeselect ariaLabelledBy="dd1" />\n\n<p-treeselect ariaLabel="Options" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -73323,18 +72946,7 @@ export class TreetableTemplateDemo implements OnInit {
           id: "example-",
           label: "Example-",
           description: "Unstyled components require styling using your preferred approach. We recommend using Tailwind CSS with PassThrough attributes, a combination that works seamlessly together. The tailwindcss-primeui even provides special variants such as p-outlined: , p-vertical for the PrimeNG components. The example below demonstrates how to style a button component with Tailwind CSS using PassThrough attributes. Before you begin, refer to the pass through section in the button documentation to familiarize yourself with the component's internal structure and PassThrough attributes. In this example, we'll target the root , label and icon elements to apply custom styles.",
-          examples: {
-            typescript: `<p-button
-    label="Search"
-    icon="pi pi-search"
-    [unstyled]="true"
-    [pt]="{ 
-        root: 'bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2', 
-        label: 'text-white font-bold text-lg', 
-        icon: 'text-white !text-xl' 
-    }"
-/>`
-          }
+          examples: null
         },
         {
           id: "global-",
@@ -73368,17 +72980,13 @@ export class TreetableTemplateDemo implements OnInit {
           id: "basic-",
           label: "Basic-",
           description: "PrimeIcons use the pi pi-&#123;icon&#125; syntax such as pi pi-check . A standalone icon can be displayed using an element such as i or span",
-          examples: {
-            typescript: '<i class="pi pi-check"></i>\n<i class="pi pi-times"></i>\n<span class="pi pi-search"></span>\n<span class="pi pi-user"></span>'
-          }
+          examples: null
         },
         {
           id: "color-",
           label: "Color-",
           description: "Icon color is defined with the color property which is inherited from parent by default.",
-          examples: {
-            typescript: '<i class="pi pi-check" style="color: slateblue"></i>\n<i class="pi pi-times" style="color: green"></i>\n<i class="pi pi-search" style="color: var(--primary-color)"></i>\n<i class="pi pi-user" style="color: #708090"></i>'
-          }
+          examples: null
         },
         {
           id: "constants-",
@@ -73420,17 +73028,13 @@ export class TreetableTemplateDemo implements OnInit {
           id: "size-",
           label: "Size-",
           description: "Size of an icon is controlled with the font-size property of the element.",
-          examples: {
-            typescript: '<i class="pi pi-check" style="font-size: 1rem"></i>\n<i class="pi pi-times" style="font-size: 1.5rem"></i>\n<i class="pi pi-search" style="font-size: 2rem"></i>\n<i class="pi pi-user" style="font-size: 2.5rem"></i>'
-          }
+          examples: null
         },
         {
           id: "spin-",
           label: "Spin-",
           description: "Special pi-spin class applies infinite rotation to an icon.",
-          examples: {
-            typescript: '<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>\n<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>'
-          }
+          examples: null
         }
       ]
     },
@@ -73444,33 +73048,25 @@ export class TreetableTemplateDemo implements OnInit {
           id: "fontawesome-",
           label: "Fontawesome-",
           description: "Font Awesome is a popular icon library with a wide range of icons.",
-          examples: {
-            typescript: '<p-dropdown>\n    <ng-template #dropdownicon>\n        <i class="fa-light fa-chevron-down"></i>\n    </ng-template>\n</p-dropdown>'
-          }
+          examples: null
         },
         {
           id: "image-",
           label: "Image-",
           description: "Any type of image can be used as an icon.",
-          examples: {
-            typescript: '<p-dropdown>\n    <ng-template #dropdownicon>\n        <img alt="dropdown icon" src="/assets/icons/arrow_down.png">\n    </ng-template>\n</p-dropdown>'
-          }
+          examples: null
         },
         {
           id: "material-",
           label: "Material-",
           description: "Material icons is the official icon library based on Google Material Design.",
-          examples: {
-            typescript: '<p-dropdown>\n    <ng-template #dropdownicon>\n        <span class="material-icons">arrow_drop_down</span>\n    </ng-template>\n</p-dropdown>'
-          }
+          examples: null
         },
         {
           id: "svg-",
           label: "Svg-",
           description: "Inline SVGs are embedded inside the dom.",
-          examples: {
-            typescript: '<p-dropdown>\n    <ng-template #dropdownicon>\n        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n            <g id="chevron-down">\n                <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>\n            </g>\n        </svg>\n    </ng-template>\n</p-dropdown>'
-          }
+          examples: null
         }
       ]
     },
@@ -73534,9 +73130,7 @@ export class TreetableTemplateDemo implements OnInit {
           id: "animations-",
           label: "Animations-",
           description: "The plugin also adds extended animation utilities that can be used with the styleclass and animateonscroll directives.",
-          examples: {
-            typescript: '<p-select [(ngModel)]="animation" [options]="animations" placeholder="Select One" class="w-full sm:w-44" />\n<div class="py-8 overflow-hidden">\n   <div [ngClass]="dynamicAnimationClasses"></div>\n</div>'
-          }
+          examples: null
         },
         {
           id: "colorpalette-",
@@ -73911,7 +73505,7 @@ export class TreetableTemplateDemo implements OnInit {
 // package.json
 var package_default = {
   name: "@primeng/mcp",
-  version: "21.1.2",
+  version: "21.1.4",
   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.2",
+  "version": "21.1.4",
   "author": "PrimeTek Informatics",
   "description": "Model Context Protocol (MCP) server for PrimeNg component library",
   "homepage": "https://primeng.org/",