feat: Update demo app with v2.0 features

- Add 24 new v2.0 props to metadata (virtual scroll, validation, tooltips, etc.)
- Add 10 new v2.0 example configurations
- Update PropDefinition type to include 'v2-features' category
- Add @angular/cdk dependency to demo package
- Update home page with v2.0 features list
- Add v2.0 code examples to docs page (virtual scroll, validation, custom templates, etc.)
- Add new v2.0 events (copy, paste, scrollEnd) to docs
- Increase component style budget to accommodate new v2.0 styles
- Update install command to include @angular/cdk

Author: ishansasika

demo/angular.json

@@ -32,8 +32,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "5kB",
-                  "maximumError": "15kB"
+                  "maximumWarning": "10kB",
+                  "maximumError": "20kB"
                 }
               ],
               "outputHashing": "all"

demo/package-lock.json

@@ -12,6 +12,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^20.0.0",
+    "@angular/cdk": "^20.0.0",
     "@angular/common": "^20.0.0",
     "@angular/compiler": "^20.0.0",
     "@angular/core": "^20.0.0",

demo/package.json

@@ -180,5 +180,104 @@ export const SELECT_EXAMPLES: Example[] = [
       debounceTime: 500,
       placeholder: 'Search with debounce...'
     }
+  },
+  {
+    name: 'Virtual Scrolling',
+    description: 'Handle 10,000+ options efficiently (v2.0.0)',
+    props: {
+      enableVirtualScroll: true,
+      virtualScrollItemSize: 40,
+      placeholder: 'Virtual scroll enabled...'
+    }
+  },
+  {
+    name: 'Validation Error',
+    description: 'Show error validation state (v2.0.0)',
+    props: {
+      validationState: 'error',
+      validationMessage: 'Please select a valid country',
+      placeholder: 'Select a country...'
+    }
+  },
+  {
+    name: 'Validation Success',
+    description: 'Show success validation state (v2.0.0)',
+    props: {
+      validationState: 'success',
+      validationMessage: 'Selection verified successfully',
+      placeholder: 'Select a country...'
+    }
+  },
+  {
+    name: 'Recent Selections',
+    description: 'Show recently selected items at top (v2.0.0)',
+    props: {
+      showRecentSelections: true,
+      recentSelectionsLimit: 5,
+      recentSelectionsLabel: 'Recently Selected',
+      placeholder: 'Select with recent history...'
+    }
+  },
+  {
+    name: 'Copy/Paste Multi-Select',
+    description: 'Copy and paste comma-separated values (v2.0.0)',
+    props: {
+      isMulti: true,
+      enableCopyPaste: true,
+      copyDelimiter: ', ',
+      placeholder: 'Try Ctrl+C and Ctrl+V...'
+    }
+  },
+  {
+    name: 'Advanced Keyboard',
+    description: 'Home/End, Type-ahead, Ctrl+A (v2.0.0)',
+    props: {
+      isMulti: true,
+      enableAdvancedKeyboard: true,
+      typeAheadDelay: 500,
+      placeholder: 'Try keyboard shortcuts...'
+    }
+  },
+  {
+    name: 'Multi-Select with Validation',
+    description: 'Combine multi-select with validation (v2.0.0)',
+    props: {
+      isMulti: true,
+      validationState: 'warning',
+      validationMessage: 'Select at least 2 countries',
+      placeholder: 'Select multiple...'
+    }
+  },
+  {
+    name: 'Purple Theme + Recent',
+    description: 'Purple theme with recent selections (v2.0.0)',
+    props: {
+      theme: 'purple',
+      showRecentSelections: true,
+      enableRecentSelectionsPersistence: true,
+      placeholder: 'Purple with recent...'
+    }
+  },
+  {
+    name: 'Large Size + Validation',
+    description: 'Large size with success validation (v2.0.0)',
+    props: {
+      selectSize: 'large',
+      containerSize: 'lg',
+      validationState: 'success',
+      validationMessage: 'Perfect choice!',
+      placeholder: 'Large validated select...'
+    }
+  },
+  {
+    name: 'Green Multi + Copy/Paste',
+    description: 'Green theme multi-select with copy/paste (v2.0.0)',
+    props: {
+      isMulti: true,
+      theme: 'green',
+      enableCopyPaste: true,
+      enableAdvancedKeyboard: true,
+      placeholder: 'Green multi with copy/paste...'
+    }
   }
 ];

demo/src/app/data/select-examples.ts

@@ -2,9 +2,9 @@ import { ComponentMetadata } from '../models/playground.types';
 
 export const SELECT_METADATA: ComponentMetadata = {
   id: 'select',
-  name: 'Perfect Select',
+  name: 'Perfect Select v2.0',
   description:
-    'A modern, feature-rich select component with react-select API compatibility, color themes, and enhanced animations',
+    'A modern, feature-rich select component with react-select API compatibility, virtual scrolling, custom templates, validation states, and advanced features',
   defaultProps: {
     options: [
       { id: 'sl', label: 'Sri Lanka', value: 'sl' },
@@ -190,6 +190,175 @@ export const SELECT_METADATA: ComponentMetadata = {
       defaultValue: 0,
       category: 'advanced'
     },
+    // v2.0.0 Props - Virtual Scrolling (4)
+    {
+      name: 'enableVirtualScroll',
+      type: 'boolean',
+      control: { type: 'boolean' },
+      description: 'Enable virtual scrolling for large datasets - v2.0.0',
+      defaultValue: false,
+      category: 'v2-features'
+    },
+    {
+      name: 'virtualScrollItemSize',
+      type: 'number',
+      control: { type: 'number', min: 20, max: 100 },
+      description: 'Item height in pixels for virtual scroll - v2.0.0',
+      defaultValue: 40,
+      category: 'v2-features'
+    },
+    {
+      name: 'virtualScrollMinBufferPx',
+      type: 'number',
+      control: { type: 'number', min: 0 },
+      description: 'Minimum buffer in pixels for virtual scroll - v2.0.0',
+      defaultValue: 200,
+      category: 'v2-features'
+    },
+    {
+      name: 'virtualScrollMaxBufferPx',
+      type: 'number',
+      control: { type: 'number', min: 0 },
+      description: 'Maximum buffer in pixels for virtual scroll - v2.0.0',
+      defaultValue: 400,
+      category: 'v2-features'
+    },
+    // v2.0.0 Props - Validation (3)
+    {
+      name: 'validationState',
+      type: 'string',
+      control: {
+        type: 'select',
+        options: ['default', 'error', 'warning', 'success', 'info']
+      },
+      description: 'Validation state for visual feedback - v2.0.0',
+      defaultValue: 'default',
+      category: 'v2-features'
+    },
+    {
+      name: 'validationMessage',
+      type: 'string',
+      control: { type: 'text' },
+      description: 'Validation message to display - v2.0.0',
+      defaultValue: '',
+      category: 'v2-features'
+    },
+    {
+      name: 'showValidationIcon',
+      type: 'boolean',
+      control: { type: 'boolean' },
+      description: 'Show icon in validation message - v2.0.0',
+      defaultValue: true,
+      category: 'v2-features'
+    },
+    // v2.0.0 Props - Tooltips (2)
+    {
+      name: 'showTooltips',
+      type: 'boolean',
+      control: { type: 'boolean' },
+      description: 'Enable tooltips on options - v2.0.0',
+      defaultValue: false,
+      category: 'v2-features'
+    },
+    {
+      name: 'tooltipDelay',
+      type: 'number',
+      control: { type: 'number', min: 0, step: 100 },
+      description: 'Tooltip hover delay in milliseconds - v2.0.0',
+      defaultValue: 300,
+      category: 'v2-features'
+    },
+    // v2.0.0 Props - Recent Selections (4)
+    {
+      name: 'showRecentSelections',
+      type: 'boolean',
+      control: { type: 'boolean' },
+      description: 'Show recently selected items at top - v2.0.0',
+      defaultValue: false,
+      category: 'v2-features'
+    },
+    {
+      name: 'recentSelectionsLimit',
+      type: 'number',
+      control: { type: 'number', min: 1, max: 20 },
+      description: 'Maximum number of recent items - v2.0.0',
+      defaultValue: 5,
+      category: 'v2-features'
+    },
+    {
+      name: 'recentSelectionsLabel',
+      type: 'string',
+      control: { type: 'text' },
+      description: 'Label for recent selections section - v2.0.0',
+      defaultValue: 'Recent',
+      category: 'v2-features'
+    },
+    {
+      name: 'enableRecentSelectionsPersistence',
+      type: 'boolean',
+      control: { type: 'boolean' },
+      description: 'Persist recent selections in localStorage - v2.0.0',
+      defaultValue: false,
+      category: 'v2-features'
+    },
+    // v2.0.0 Props - Infinite Scroll (3)
+    {
+      name: 'enableInfiniteScroll',
+      type: 'boolean',
+      control: { type: 'boolean' },
+      description: 'Enable infinite scroll for pagination - v2.0.0',
+      defaultValue: false,
+      category: 'v2-features'
+    },
+    {
+      name: 'infiniteScrollThreshold',
+      type: 'number',
+      control: { type: 'number', min: 0, max: 100 },
+      description: 'Scroll percentage to trigger load (%) - v2.0.0',
+      defaultValue: 80,
+      category: 'v2-features'
+    },
+    {
+      name: 'totalOptionsCount',
+      type: 'number',
+      control: { type: 'number', min: 0 },
+      description: 'Total options count for pagination - v2.0.0',
+      defaultValue: null,
+      category: 'v2-features'
+    },
+    // v2.0.0 Props - Advanced Keyboard (4)
+    {
+      name: 'enableAdvancedKeyboard',
+      type: 'boolean',
+      control: { type: 'boolean' },
+      description: 'Enable advanced keyboard shortcuts - v2.0.0',
+      defaultValue: true,
+      category: 'v2-features'
+    },
+    {
+      name: 'typeAheadDelay',
+      type: 'number',
+      control: { type: 'number', min: 0, step: 100 },
+      description: 'Type-ahead buffer timeout (ms) - v2.0.0',
+      defaultValue: 500,
+      category: 'v2-features'
+    },
+    {
+      name: 'enableCopyPaste',
+      type: 'boolean',
+      control: { type: 'boolean' },
+      description: 'Enable copy/paste functionality - v2.0.0',
+      defaultValue: true,
+      category: 'v2-features'
+    },
+    {
+      name: 'copyDelimiter',
+      type: 'string',
+      control: { type: 'text' },
+      description: 'Delimiter for copying values - v2.0.0',
+      defaultValue: ', ',
+      category: 'v2-features'
+    },
     // Behavior Props (4)
     {
       name: 'closeMenuOnSelect',

demo/src/app/data/select-metadata.ts

@@ -15,7 +15,7 @@ export interface PropDefinition {
   control: ControlConfig;
   description: string;
   defaultValue?: any;
-  category?: 'basic' | 'advanced' | 'styling' | 'async' | 'behavior';
+  category?: 'basic' | 'advanced' | 'styling' | 'async' | 'behavior' | 'v2-features';
 }
 
 export interface Example {