feat(dees-icon): Add full icon list and improve dees-icon demo with copy-all functionality and UI tweaks

ts_web/elements/dees-icon.demo.ts

@@ -40,6 +40,26 @@ export const demoFunc = () => {
   }
 
   // Define the functions in TS scope instead of script tags
+  const copyAllIconNames = () => {
+    // Generate complete list of all icon names with prefixes
+    const faIconsList = faIcons.map(name => `fa:${name}`);
+    const lucideIconsListPrefixed = lucideIconsList.map(name => `lucide:${name}`);
+    const allIcons = [...faIconsList, ...lucideIconsListPrefixed];
+    const textToCopy = allIcons.join('\n');
+    
+    navigator.clipboard.writeText(textToCopy).then(() => {
+      // Show feedback
+      const currentEvent = window.event as MouseEvent;
+      const button = currentEvent.currentTarget as HTMLElement;
+      const originalText = button.textContent;
+      button.textContent = `✓ Copied ${allIcons.length} icon names!`;
+      
+      setTimeout(() => {
+        button.textContent = originalText;
+      }, 2000);
+    });
+  };
+  
   const searchIcons = (event: InputEvent) => {
     const searchTerm = (event.target as HTMLInputElement).value.toLowerCase().trim();
     // Get the demo container first, then search within it
@@ -111,6 +131,7 @@ export const demoFunc = () => {
       width: 100%;
       margin-bottom: 20px;
       display: flex;
+      gap: 10px;
     }
     
     #iconSearch {
@@ -129,6 +150,27 @@ export const demoFunc = () => {
       border-color: #e4002b;
     }
     
+    .copy-all-button {
+      padding: 12px 20px;
+      font-size: 16px;
+      border: none;
+      border-radius: 4px;
+      background: #e4002b;
+      color: #fff;
+      cursor: pointer;
+      transition: all 0.2s;
+      white-space: nowrap;
+    }
+    
+    .copy-all-button:hover {
+      background: #c4001b;
+      transform: translateY(-1px);
+    }
+    
+    .copy-all-button:active {
+      transform: translateY(0);
+    }
+    
     dees-icon {
       transition: all 0.2s ease;
       color: #ffffff;
@@ -239,6 +281,7 @@ export const demoFunc = () => {
   <div class="demoContainer">
     <div class="search-container">
       <input type="text" id="iconSearch" placeholder="Search icons..." @input=${searchIcons}>
+      <button class="copy-all-button" @click=${copyAllIconNames}>📋 Copy All Icon Names</button>
     </div>
     
     <div class="api-note">
@@ -258,7 +301,7 @@ export const demoFunc = () => {
             return html`
               <div class="iconContainer fa-icon" data-name=${iconName.toLowerCase()} @click=${() => copyIconName(iconName, 'fa')}>
                 <dees-icon .icon=${prefixedName as IconWithPrefix} iconSize="24"></dees-icon>
-                <div class="iconName">${iconName}</div>
+                <div class="iconName">fa:${iconName}</div>
                 <span class="copy-tooltip">Click to copy</span>
               </div>
             `;
@@ -279,7 +322,7 @@ export const demoFunc = () => {
             return html`
               <div class="iconContainer lucide-icon" data-name=${iconName.toLowerCase()} @click=${() => copyIconName(iconName, 'lucide')}>
                 <dees-icon .icon=${prefixedName as IconWithPrefix} iconSize="24"></dees-icon>
-                <div class="iconName">${iconName}</div>
+                <div class="iconName">lucide:${iconName}</div>
                 <span class="copy-tooltip">Click to copy</span>
               </div>
             `;